box-sizing 不影响 padding

Question

大家好，我是编码的新手，我进行了研究并最终得出结论，如果我不希望填充或边距影响总大小，我必须使用 box-sizing:border-box但是在示例中，如果我更改填充，它会影响总宽度和大小并且容器会变大吗？我该如何解决这个问题？ © 尝试更改显示属性但我做不到。我还尝试在 .mid_card 元素本身中使用 box-sizing:border-box 并且仍然相同。 :(

注：我用过 SASS 我也尝试过更改 CSS 代码但是问题（我认为这不是问题，我不知道如何编码 :( ) 一直活着！

提前致谢。

body {
  font-size: 10px;
  box-sizing: border-box;
}

.mid {
  background-color: #f6f9fc;
  margin: 1rem;
  height: 95vh;
}

.mid__card {
  background-color: white;
  margin: 4rem;
  border-radius: 12px;
  border: .1em solid white;
  box-shadow: 0 0.2rem 0.4rem 0.2rem rgba(0, 0, 0, 0.171);
  height: 10rem;
  width: 40rem;
  padding: 3rem;
}

<link href="https://fonts.googleapis.com/css2?family=Raleway&family=Staatliches&display=swap" rel="stylesheet">

<div class="mid">
  <div class="mid__title">
    <h1 class="mid__title__head">Our Team</h1>
  </div>
  <div class="mid__card">

    <h2 class="mid__card__title">Roger Harry</h2>

    <h3 class="mid__card__subtitle">Founder</h3>

    <p class="mid__card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum animi magni hic molestias? Et adipisci cum ad doloremque exercitationem corporis error dolorum, voluptatem, dicta tenetur sunt nam explicabo quaerat architecto. Placeat corrupti esse
      debitis, veritatis nihil suscipit voluptates dolorem ab architecto est officiis laboriosam velit, sit dolore fugiat perferendis doloribus totam harum! Autem accusantium placeat fugiat soluta dolorem quidem eaque.
    </p>
    <button class="mid__card__button">LinkedİN</button>

  </div>
</div>
</div>

Answer 1

box-sizing: border-box 确实强制选定元素上的所有填充不影响您提到的元素的总大小。你是对的。您的代码的问题是您仅在第一行的 body 元素上设置此属性：

body {
  font-size: 10px;
  box-sizing: border-box; /* this is only affecting the body element */
}

我将该规则从 body 选择器移到 通用选择器 中，它选择文档中的所有元素。这允许您的问题元素 .mid_card 在应用填充时不会变大。

* {
  box-sizing: border-box; /* moved this rule outside of body to affect all elements */
}
body {
  font-size: 10px;
}
.mid {
  background-color: #f6f9fc;
  margin: 1rem;
  height: 95vh;
}
.mid__card {
  background-color: white;
  margin: 4rem;
  border-radius: 12px;
  border: .1em solid white;
  box-shadow: 0 0.2rem 0.4rem 0.2rem rgba(0, 0, 0, 0.171);
  height: 15rem; /* increased height to avoid clipping */
  width: 40rem;
  padding: 3rem;
}

<body>
  <div class="mid">
    <div class="mid__title">
      <h1 class="mid__title__head">Our Team</h1>
    </div>
    <div class="mid__card">
      <h2 class="mid__card__title">Roger Harry</h2>
      <h3 class="mid__card__subtitle">Founder</h3>
      <p class="mid__card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum animi magni hic molestias? Et adipisci cum ad doloremque exercitationem corporis error dolorum, voluptatem, dicta tenetur sunt nam explicabo quaerat architecto. Placeat corrupti esse
        debitis, veritatis nihil suscipit voluptates dolorem ab architecto est officiis laboriosam velit, sit dolore fugiat perferendis doloribus totam harum! Autem accusantium placeat fugiat soluta dolorem quidem eaque.
      </p>
      <button class="mid__card__button">LinkedİN</button>
    </div>
  </div>
</body>

所以你可以看到它是如何工作的：见下面的片段。左侧的方块默认使用 box-sizing，而右侧的方块应用 box-sizing: border-box。在此动画中，如您所见，我们正在增加 div 的填充。 请注意，右边的 div 不会随着填充的增加而变大

* {
  margin: 0; padding: 0;
}
html, body {
  height: 100%;
  font-family: Arial;
}
body, div {
  display: flex;
  justify-content: center;
  align-items: center;
}
div {
  margin: 0.5rem;
  border-radius: 1rem;
  width: 7.5em; height: 7.5em;
  background-color: #09f; color: #ccf;
  text-align: center;
  text-transform: uppercase;
  animation-name: add-padding;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
p {
  background-color: rgba( 0,0,0,0.125 );
}
@keyframes add-padding {
  100% {
    padding: 2.5rem;
  }
}

<div>
  <p>default</p>
</div>

<div style='box-sizing: border-box'>
  <p>box-sizing: border-box</p>
</div>

编辑

在下方添加屏幕录像，以便 OP 可以在开发工具中看到填充大小的增加，而不会影响所讨论的 div 的总尺寸。

Answer 2

当box-sizing为border-box时，不包含在总宽度中的margin - padding（和 border 宽度）是始终包含在该设置中。不要把这两者混为一谈。

box-sizing 不影响 padding

Box-sizing does not affect the padding

html

css

padding

编辑