CSS负边距的行为表现方法

这篇文章主要讲解了“CSS负边距的行为表现方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS负边距的行为表现方法”吧！

　　CSS 中的负边距

　　margin 是可以设置为负值的，这会帮你实现靠近顶部/左边相邻元素的效果，或者实现靠近底部/右边相邻元素的效果。

　　先介绍下我们的测试元素：一个简单的包含三个段落的容器元素。注意，段落设置了固定宽度 250px。

　　<div class="test-container"> <p>First paragraph with a bit of text in it to provide some content.</p> <p>Second paragraph with a bit of text in it to provide some content.</p> <p>Third paragraph with a bit of text in it to provide some content.</p>

　　</div>

　　<style>

　　* { box-sizing: border-box; }

　　.container {

　　border: 5px double;

　　width: 300px;

　　padding: 0 10px;

　　}

　　.container p {

　　border: 1px solid;

　　width: 250px;

　　}

　　</style>

　　效果：

　　负边距 margin-top/bottom

　　先给第一段文本 margin-bottom: -15px，结果第二段文本的经浏览器重新计算，向上提升了 15px。

　　第二段文本作为邻居紧跟在第一段文本后面，第二段文本和第三段文本之间的间距没有变化，整体依旧是垂直布局。

　　这个技巧比较适合用来微调位置，如果一个元素想要轻微的盖住前面一个元素的话，可以使用它。

　　现在恢复布局，给第二段文本 margin-top: -15px 看看效果。

　　可以看见，跟在第一段文本使用 margin-bottom: -15px 的效果一样。第二段文本在此被向上提升了 15px。通过在浏览器控制台查看，第一段文本的 margin-bottom 仍是默认的 1rem。

　　边距合并（Margin collapsing）

　　边距塌陷行为在负边距上的行为是不同的。

　　针对负边距场景：如果相邻两元素中一个是正边距，一个负边距，则 相邻间距（adjoining margin）= 正边距 - 负边距绝对值（结果两元素相交和相离，取决于谁的绝对值更大）；如果相邻两元素中没有正边距，则 相邻边距 = 0 - 边距 1 绝对值 - 边距 2 绝对值（结果两元素相交）。

　　对正边距来说，规则是这样的：浏览器会比较第一段文本的 margin-bottom 和第二段文本的 margin-top，谁的值大，最终间距就是谁，以 margin-bottom: 16px 和 margin-top: 4px 为例，那么最终的间距为 16px；而对存在负边距的场景就不是这样了，像上面一个是 margin-bottom: 1em（假设是 16px），一个是 margin-bottom: -15px，那么按照规则，最终的间距是 16px - 15px，得 1px，因为是正值，所以表示两者相离 1px 的距离。

　　可以看见，我们可以使用负边距达到两元素相互靠近的布局，而不会受到边距合并的影响。

　　到这里，算是介绍完负边距 margin-top/bottom 的情况了。

　　负边距 margin-left/right

　　负边距 margin-left/right 的工作方式与 margin-top/left 一样，元素还是有一个固定宽度。下面分别给第一和第二个文本段落设置 margin-left: -10px 和 margin-right: -10px。

　　可以看见，第一个段落向左偏移了 10px，宽度没有变化，同时右边缘也向左移动了 10px。

　　第二个段落的负 margin-right 值没有起作用。因为 margin-right 负值影响的是第二个段落右面的元素，当前第二个段落右边是没有元素的，因此看不到效果。

　　为了展示 margin-right 负值效果，需要将段落元素设置成浮动的，这样就有右边的相邻元素了。

　　现在在段落上设置负边距。

　　可以看见，因为第一个段落设置了 margin-right: -10px，导致第二个段落向左偏移 10px。这跟之前看到的 margin-bottom 负值的效果是一样的。

　　同时，第二个段落设置了 margin-top: -10px，于是向上偏移了 10px。第三个元素设置了 margin-bottom: -10px，但没有效果，是因为底部没有元素。

　　注：margin-bottom: -10px 产生了影响，效果没有出来不只是因为底部没有元素&mdash;&mdash;我们将第一个元素删除，就能看到父元素高度塌陷了，塌陷的高度正好等于第三个段落元素的负边距绝对值，即 10px（如下图）。而之前没有塌陷的原因是因为第一个元素的高度撑开了父元素，导致父元素高度无法塌陷。

　　<figcaption style="margin-top: 5px; text-align: center; color: #888; font-size: 14px;">GIF.gif</figcaption>

　　需要注意的是，边距合并只适用于 margin-top 和 margin-bottom 属性，不对 margin-left、margin-right 起作用，所以不用担心这里的左右边距的合并问题。

　　如果，我们只是给第二个段落设置 margin-left: -10px，能看到同样的效果。

　　可以看见，在元素固宽情况下，margin-left、margin-right 负值的行为表现跟 margin-top 和 margin-bottom 负值的行为表现是一样的。

　　width: auto 和 margin-right 负值

　　现在不为段落设置固定宽度，而是让它们使用默认的 width: auto 设置观察 margin-right 的负值行为表现。默认情况下，width: auto 段落元素默认会充满在父元素宽度，同时受限于父元素的 padding。

　　现在分别给第一和第二个段落设置 margin-left: -10px 和 margin-right: -10px，第三个元素同时设置 margin-left: -10px、margin-right: -10px 查看效果。注意，为了方便对照，这里加入了一个参考元素（Reference paragraph）：

　　观察发现：第一个段落向左偏移了 10px，宽度增加了，右边缘未受到影响，位置未变；第二个段落向右偏移了 10px，宽度增加了，左边缘未受到影响，位置未变。这种情况，只在 width: auto 下发生，这与固定宽度的元素表现是不一样的。

　　第三个段落的左右两端都使用负边距值，导致左右都向外延伸了 10px 的距离，正好抵消了容器元素左右 10px 的 padding。这是负边距最常用的应用场景&mdash;&mdash;为了让内容与容器间保持一定的留白间隙，容器设置了 padding，但是内容里的一个标题需要延伸到整个容器的宽度展示（不畏外部 padding 值），这就到使用负边距的时候了。

　　这里贴出了上面结构的样式（容器元素设置了 padding: 10px）。

　　h6 { margin-left: -10px; margin-right: -10px; padding-left: 10px; margin-top: 0; margin-bottom: 0; background-color: grey; color: white; /* no width, so defaults to width: auto */ }复制代码

　　再一次要说明的是，这只在标题元素 width: auto 的情况下才能生效，不过这已经覆盖 99% 的实际使用场景了。

感谢各位的阅读，以上就是“CSS负边距的行为表现方法”的内容了，经过本文的学习后，相信大家对CSS负边距的行为表现方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！