Question

在div上添加页边距将右列从屏幕边缘移到右侧。

我尝试过在和之间添加边距，更改宽度，甚至从CSS上完全删除width属性。

根本没有空白，这三列完全适合屏幕宽度，并且默认的微小空白显示了我页面的背景颜色。添加任何余量会使整个事情搞砸。

<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之间没有边距。

Answer 1

将

CSS边距添加到元素的外部。如果您的<div>的宽度为100％，并且在两边都添加了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;
}

在下面的代码段中，第一行和第二行之间的唯一区别是页边距。请注意，盒子本身的大小相同。边距被添加到框的外部。

* {
  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>

Answer 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>

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

2 个答案: