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

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

首先注意:您缺少 display: inline-block 来自 part div。

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>