为什么盒子大小不包含边距

Question

调整到边框，以便我可以给我的网格一些排水沟，但令人惊讶的是它不再适合行，即使列总共跨越12行。我实际上认为将box-sizing设置为border-box会将填充，边距和边框加到设置的宽度和高度上。

               <div class="row>
                    <div class="col-6"></div>
                    <div class="col-4"></div>
                    <div class-"col-2"></div>
              </div>

               [class*="col-"] {
                padding: 15px;
                margin: 5px;
                float: left;
               }
               * {
                  box-sizing: border-box;
              }

如何给我的网格一些排水沟？

Answer 1

由于box-sizing不包含margin，所以这是一种简单的方法（这也是 bootstrap 等如何使其工作）

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
[class*="col-"] {
  padding: 15px;
  margin: 5px;
  float: left;
}
.col-6 {
  width: calc(50% - 10px);
}
.col-4 {
  width: calc(33.33% - 10px);
}
.col-2 {
  width: calc(16.67% - 10px);
}

/*  for styling this sample  */
.row div {
  border: 1px solid;
  padding: 20px;
}

＆＃13;

<div class="row">
  <div class="col-6"></div>
  <div class="col-4"></div>
  <div class="col-2"></div>
</div>
<div class="row">
  <div class="col-2"></div>
  <div class="col-4"></div>
  <div class="col-2"></div>
  <div class="col-4"></div>
</div>

＆＃13;

＆＃13;

＆＃13;