1

各アイテム間に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>

すべての間に5pxの正確なパディングまたはスペースを取得する方法はありますか?

注: + 演算子を試しましたが、6 番目の項目に副作用があります。これらの 10 項目は兄弟であるためです。

4

2 に答える 2

1

to の値を変更しようとしましたが、.pad期待2.5pxどおりに動作しました

編集：一貫したパディングを持つすべての側面に追加さpaddingれました.white.box

// 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>

これがお役に立てば幸いです!!

于 2015-04-10T05:29:47.587 に答える