为什么向我的 div 添加边距会将其内容（列）推离页面？答案

【问题标题】：Why does adding a margin to my div push its content (columns) off the page?为什么向我的 div 添加边距会将其内容（列）推离页面？
【发布时间】：2019-05-27 23:38:55
【问题描述】：

向 div 添加边距会将右列从屏幕边缘推到右侧。

我尝试为和都添加边距，更改宽度，甚至从 CSS 中完全删除宽度属性。

完全没有边距，这 3 列与屏幕的宽度完美匹配，默认的小边距显示了我页面的背景颜色。添加任何边距会使整个事情变得混乱。

<HTML>
<main>
    <section>
    Some text 1
    </section>

    <section>
    Some text 2
    </section>

    <section>
    Some text 3
    </section>
</main>


CSS

<<<<<<<SOME MEDIA QUERIES TO MAKE IT ADAPTABLE FOR MOBILE>>>>>>>

@media (min-width: 620px) {
main {
    column-count: 2;
}
section {
    break-inside: avoid;
}
}

@media (min-width: 960px) {
    main {
        column-count: 3;
    }
}


<<<<<<<<<<<<NORMAL CSS>>>>>>>>>>>>>>

main {
    width: 100%;
    margin-right: 5%;  <<<<<PROBLEM AREA
    margin-left: 5%;
}

section {
    height: 25%;
    margin-bottom: 5%;
    padding: 20px;
    display: inline-block;
}

我希望 div 的左侧和右侧有 5% 的边距，div 之间没有边距。

【问题讨论】：

标签： html css

【解决方案1】：

CSS 边距被添加到元素的外部。如果您有一个宽度为 100% 的 <div>，并在两侧添加 5% 的边距，则该元素现在是 110% 宽。

如果你想添加边距，你必须在元素的宽度中考虑它们。如果宽度和边距都是百分比，你可以减去边距：

main {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

如果宽度和边距使用不同的单位（例如宽度：100%，边距：24px），您可以使用css calc：

main {
  width: calc(100% - 48px);
  margin-left: 24px;
  margin-right: 24px;
}

在下面的sn-p中，第一行和第二行的唯一区别就是边距。请注意，盒子本身的大小相同。边距添加到框外。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.grid {
  background-color: white;
  background-image: linear-gradient(transparent 24px, #999 25px), linear-gradient(90deg, transparent 24px, #999 25px);
  background-size: 25px 25px, 25px 25px;
  background-position: 1px 1px;
  height: 100vh;
}

.container > div {
  display: inline-block;
  width: 100px;
  background: bisque;
  margin: 0 21px 22px 0;
  min-height: 50px;
}

.container.second > div {
  background: tomato;
  margin: 0 46px 15px 0;
}

<div class="grid">
  <div class="container first">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="container second">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

【讨论】：

【解决方案2】：

不同部分的解释：

Content - 显示文本和图像的框的内容

Padding - 清除内容周围的区域。填充是透明的

Border - 围绕填充和内容的边框

Margin - 清除边界外的区域。边距是透明的

一个元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

元素的总高度应该这样计算：

总元素高度 = 高度 + 上边距 + 下边距 + 上边框 + 下边框 + 上边距 + 下边距

div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. 
Total width here becomes:

300px (width)
+ 100px (left + right padding)
+ 30px (left + right border)
+ 40px (left + right margin)
= 470px
</div>

【讨论】：

您可能还想解释box-sizing 在border-box 和content box 之间的区别。边框大小更直观，切换到它通常可以消除溢出问题和微调。