负边距会导致滚动

Question

我将尝试在内容的两侧以外实现填充效果。这是我的代码:

http://jsfiddle.net/3tbovz0f/1/

CSS:

.col1 .fill {
    background: red;
}
.col2 .fill {
    background: blue;
}
.col {
    width: 50%;
    float: left;
}
.pd {
    padding: 10px;
}
.row {
    margin: -10px;
}
.fill {
    height: 30px;
}

HTML:

<div class="row">
    <div class="col col1">
        <div class="pd">
            <div class="fill"></div>
        </div>
    </div>
    <div class="col col2">
        <div class="pd">
            <div class="fill"></div>
        </div>
    </div>
</div>

我从这里得到了滚动条。我做错了什么？为什么它会出现？

- dandaka

---

你可以尝试提供一张这个应该是什么样子的图片。我认为有些混淆了。 - Paulie_D

我有点困惑... 为什么不直接使用 padding: 10px 0; 这样的方式呢？ - Xander Luciano

Answer 1

负边距会将div从页面上拉出，从而给你滚动条，但负边距不是好的做法，应该避免使用。您还在两个50%宽度元素上添加填充，这将使它比100%更大。 如果您想这样做，则必须使用box-sizing属性中的border-box值。

我稍微重构了您的CSS，并认为您要求在所有但外侧使用填充？因此，我按照此方式结构化填充。

jsfiddle - https://jsfiddle.net/3tbovz0f/11/

/*makes it so you don't have to calculate exact percentage*/
html{
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    margin: 0;  
}
.col1 .fill {
    background: red;
}
.col2 .fill {
    background: blue;
}
.col1 {
    padding: 10px 10px 10px 0;
}

.col2 {
    padding: 10px 0 10px 10px;
}

.col {
    width: 50%;
    float: left;
}

.row {
    width:100%;
}
.fill {
    height: 30px;
}

- boolean12

---

你的代码示例没有运行成功，仍然有边缘填充。我认为你可能没有贴对链接。 - Xander Luciano

非常抱歉！正确的链接已经添加了，如果您没有使用重置，则正文会自动添加边距，因此我也将其添加进去了。 - boolean12

Answer 2

你需要使用box-sizing:border-box才能让它正确显示。

这里有一个正常工作的示例：http://jsfiddle.net/sLxphrke/14/

CSS

body {
    margin:0;
    padding:0;
}
.col1 .fill {
    background: red;
}
.col2 .fill {
    background: blue;
}
.col {
    width: 50%;
    float: left;
    padding-left:10px;
    box-sizing:border-box;
}
.pd {
    padding: 10px 0;
}
.row {
    margin: 0 0 0 -10px;
    overflow: auto;
    background: pink;
}

我还将PD上的填充修改为仅影响顶部和底部，并为每列设置了10px的填充。要创建更多行，您只需要将50％更改为100 / NumberOfRows，例如3行为33.3333％。其他所有内容都将保持不变。

- Xander Luciano

Answer 3

问题在于母亲的.row div没有占满整个屏幕（具体来说），而您有另外两个子div，每个占50%。因此，当您将两者相加为100％+边距/填充时，这会给您带来超过100％的宽度。因此，您必须指定母div的宽度，以便子div相对于其母div。您只需要向.row类添加width:100%即可...我刚刚创建了一个新的fiddle，请查看：http://jsfiddle.net/3tbovz0f/3/

- Gabriel Rodriguez

---

虽然这理论上回答了问题（实际上并没有），但最好在此处包含答案的基本部分，并提供链接作为参考。仅有链接的答案可能会因链接页面更改而失效。更好的做法是将答案的关键部分包含在回答中，同时提供链接以供参考。 - Paulie_D

好的，我理解了你的评论。只是我觉得这个问题很简单，所以没有详细解释。我已经更新了我的回答并加上了解释。今后我会考虑到这一点。谢谢。 - Gabriel Rodriguez

Answer 4

更新如下。 请查看此链接：http://jsfiddle.net/realdeepak/sLxphrke/

body {
    margin: 0;
    padding: 0;
}
.row {
    margin: 0px;
}

我认为这会起作用。你的滚动条将被移除。

- RealDeepak

---

我错过了什么？在给出负面评价之前，请先尝试充分阐述。否则您将会有同样的感受。 - RealDeepak

你的解决方案并没有解决他的基本问题，他不希望有空白出现在彩色div的两侧。它们应该与窗口边缘对齐。http://jsfiddle.net/3tbovz0f/4/ - Paulie_D

请检查我的fiddle链接：http://jsfiddle.net/realdeepak/sLxphrke/ 我使用了相同的代码。即使没有margin-10px，它也可以正常工作。使用负边距并不是最好的方法。 - RealDeepak

看... 红色和蓝色的divs没有与窗口的边缘紧密贴合。在这个fiddle中，左右两侧不应该有粉色部分。这就是他想要做的事情。 - Paulie_D

但是保罗，请确认一下，你的代码描述不符合标准。我的策略相同，但没有使用负边距。如果他使用负边距，他将来设计时肯定会遇到问题。 - RealDeepak