CSS：有没有办法在兄弟项目之间获得相同的填充

Question

我在每个项目之间设置了 5px 的填充，但是 5px + 5px 在兄弟项目之间变成了 10px（水平，垂直也有 10px）

http://plnkr.co/edit/7FKBiTocHrTuwnpEqQsu?p=preview

// Code goes here

angular.module('app', [])
   .controller('MainCtrl', function($scope){
     $scope.items = Array(10);
   })

/* Styles go here */

*, :after, :before {
  box-sizing: border-box;
}

.one.fifth {
  width: 20%;
}
.one.whole{
  width: 100%;
}
.pad {
  padding: 5px;
}
.red {
  color: red;
}
.box {
  float: left;
  position: relative;
}
.red.box {
  background-color: red;
}
.white.box {
  background-color: white;
}
.black.border {
  border: 1px solid #000;
}
.center {
  text-align: center;
}

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
  </head>

  <body class="one whole">
    <div ng-controller="MainCtrl">
      <div class="red box pad center">
        <div class="white box">
          <div class="one fifth box pad" ng-repeat="item in items track by $index">
            <div class="one whole black border box">TEST {{$index}}</div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

有什么方法可以使所有内容之间的填充或间距精确为 5 像素？

注意：我试过+运算符，但是第六项有副作用，因为这10项是兄弟

Answer 1

尝试将 .pad 的值更改为 2.5px 并且它按预期工作

编辑：为.white.box添加了padding，现在所有边都有一致的填充

// Code goes here

angular.module('app', [])
   .controller('MainCtrl', function($scope){
     $scope.items = Array(10);
   })

/* Styles go here */

*, :after, :before {
  box-sizing: border-box;
}

.one.fifth {
  width: 20%;
}
.one.whole{
  width: 100%;
}
.pad {
  padding: 2.5px; / * changed this value to 2.5px and its working */
}
.red {
  color: red;
}
.box {
  float: left;
  position: relative;
}
.red.box {
  background-color: red;
}
.white.box {
  background-color: white;
 padding:3px 2px 2px 2px;
}
.black.border {
  border: 1px solid #000;
}
.center {
  text-align: center;
}

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>

  <body class="one whole">
    <div ng-controller="MainCtrl">
      <div class="red box pad center">
        <div class="white box">
          <div class="one fifth box pad" ng-repeat="item in items track by $index">
            <div class="one whole black border box">TEST {{$index}}</div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

希望对您有所帮助！！

Answer 2

为什么不能只使用 nth-child CSS 选择器？给除第一个元素之外的所有元素 padding-right of 5px，第一个元素也给它 padding-left of 5px。最简单的解决方案，不是吗？

Link 到文档：http://www.w3schools.com/cssref/sel_nth-child.asp

CSS：有没有办法在兄弟项目之间获得相同的填充

CSS: Is there a way to get same padding between sibling items

html

css

padding

border-box