我在每个元素之间设置了 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项是兄弟
最佳答案
为什么不能只使用 nth-child CSS 选择器？为第一个元素以外的所有元素赋予 5px 的 padding-right，并为第一个元素赋予 5px 的 也是。最简单的解决方案，不是吗？padding-left
关于html - CSS:有没有办法在兄弟元素之间获得相同的填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29553944/