首页 文章

为什么盒子大小不包含边距[重复]

提问于
浏览 次
1

这个问题在这里已有答案：

调整到边框，以便我可以给我的网格一些排水沟，但令人惊讶的是它不再适合行，即使列完全跨越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;
              }

我怎么能给我的网格一些排水沟？

html css

1 回答

  • 1

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

    * {
  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;
}

    <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>
    回复于

相关问题