向部分添加边距会破坏三列设计

Question

下面是简单的三列设计的 HTML & CSS 代码。但是当我添加 padding: 0 1%; 时，它会打断该列并将第三列推到第二行。这真的很奇怪，因为我认为我添加了填充，它应该在 div 内，而不是边距？我该如何解决？

#container {
  width: 800px;
  margin: 0 auto;
}

.row {
  width: 100%
}

.part {
  width: 33.33%;
  padding: 0 1%;
}

<div id="container">
  <div class="row">
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
  </div>
  <div class="row">
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
  </div>
  <div class="row">
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
  </div>
</div>

Answer 1

第一个旁注：part div.

中缺少 display: inline-block

I added padding, which should be inside the div, as opposed to margin

不，padding 不在 div 内，默认情况下，padding 被添加到实际宽度，因此每个部分的全宽将为：

33% + 1% 左填充 + 1% 右填充 = 35%;

并且行的总宽度为：105%，因此它不适合容器，将拆分为另一行。

一个解决方案是 part width: 31%;

  #container {
      width: 800px;
      margin: 0 auto;
    }

    .row {
      width: 100%;
    }

    .part {
      width: 31%;
      padding: 0 1%;
      display: inline-block
    }

 <div id="container">
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
    </div>

如果您想将所有填充都视为宽度的一部分，其他解决方案是使用：

* {
      box-sizing: border-box;
    }

  * {
      box-sizing: border-box;
    }
    
  
  #container {
      width: 800px;
      margin: 0 auto;
    }

    .row {
      width: 100%;
    }

    .part {
      width: 33%;
      padding: 0 1%;
      display: inline-block;
    }

<div id="container">
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
    </div>
  </body>

第三种解决方案，也是我认为最好的 是对每一行使用 display: grid；

 #container {
      width: 800px;
      margin: 0 auto;
    }

    .row {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
    .part {
      padding: 0 1%;
    }

  <div id="container">
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
    </div>

Answer 2

因为box-sizing不继承给children使用

#container, #container * {
  box-sizing: border-box;
}

尽量避免响应式网站中的水平边距，因为box-sizing不包括边距。

Answer 3

在我测试了你的代码之后，我认为在通用选择器“*”处添加 box-sizing: border-box 或者您可以在不调整框大小的情况下遵循此规则。

.part {width: calc(33.33% - 3%); /* 3% mean part+part+part padding. */ padding: 0 1%;display: inline-block; /* you can also use float: left or inline-block */ }

谢谢。

向部分添加边距会破坏三列设计

Adding margin to sections breaks the three column design

html

css

padding

multiple-columns

responsive-design