CSS负边距的行为表现方法

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

创新互联公司是一家集成都网站建设、网站建设、网站页面设计、网站优化SEO优化为一体的专业网站制作公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。

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

需要注意的是，边距合并只适用于 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。这是负边距最常用的应用场景——为了让内容与容器间保持一定的留白间隙，容器设置了 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负边距的行为表现方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

文章题目：CSS负边距的行为表现方法
标题URL：https://www.cdcxhl.com/article4/giseoe.html

成都网站建设公司_创新互联，为您提供标签优化、小程序开发、移动网站建设、做网站、商城网站、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容