盒子大小不影响填充答案

【问题标题】：Box-sizing does not affect the padding盒子大小不影响填充
【发布时间】：2021-08-30 17:34:14
【问题描述】：

大家好，我是编码的超级新手，我已经进行了研究，最后得出结论，如果我不希望填充或边距影响总大小，我必须使用 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>

【问题讨论】：

标签： html css padding

【解决方案1】：

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

【讨论】：

"border-box 告诉浏览器在为元素的宽度和高度指定的值中考虑任何边框和填充。如果将元素的宽度设置为 100 像素，则 100 像素将包括添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。这使得调整元素的大小变得更加容易。” 取自 MDN developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。内边距和边框包含在border-box 的总尺寸中。 OP 正在询问如何将其包含在 div 中。因此，将box-sizing: border-box 添加到有问题的 div 是一个解决方案。
@devsandbox 来自问题：“如果我不希望填充或边距影响总尺寸，我必须使用 box-sizing:border-box”。在我写之前，我已经从 OP 中阅读了你的答案和 cmets，所以我的答案可能也可以被视为评论，但由于 OP 写道，使用通用选择器添加 box-sizing:border-box 不会改变行为，我只能怀疑他们正在改变边距，因此我的回答。

【解决方案2】：

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>

所以你可以看到它是如何工作的：参见下面的 sn-p。左边的方块有默认的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 的总尺寸。

【讨论】：

当我首先问这个问题时应该把它写下来。我尝试使用通用选择器，但它仍然变得更大。
如果您之前将通用选择器应用于您的代码，则您没有正确应用它。在上面的 sn-ps 中，您可以尝试编辑代码并添加任意数量的填充。在我提供的代码中，div 没有变大。 我添加了一个动画来帮助您直观地了解正在发生的事情。点击show code snippet。
非常感谢。但事实并非如此，我已经正确应用了它，这就是为什么我要问一个让我发疯的问题。我仍然有同样的问题。这一次，如果我更改填充，卡片内的元素会移出它而不是变小并移到中间。
@berboş 为了向您证明此代码有效，我在您的 div mid_card 上添加了填充的屏幕记录，增加和减少。您的 div 的总尺寸没有受到影响。你确定你没有在你的代码中应用这个错误吗？
非常感谢您帮助我！如果您还告诉我为什么当我们添加填充时 mid__card 内的元素会移到其父元素之外，以及为什么它们先到中间然后到右下角，我会非常高兴？