margin负边距可以对宽度产生影响

最新推荐文章于 2022-09-16 19:10:14 发布

最新推荐文章于 2022-09-16 19:10:14 发布 · 454 阅读

文章标签：

#UI

html/css 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了当内部div的margin-left和margin-right设置为负边距时，导致内部div宽度增加的现象及其背后的原理。通过实例展示了这种现象的具体表现，并解释了其原因在于宽度属性为auto时，负边距使内部div自填剩余空间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里有两个div，外部的div宽度设置为固定值，内部的div宽度设置为auto，当内部div的margin-left 和margin-right 设置为负边距时，会使内部div的宽度增加，如下所示


<div style="margin:auto;width:400px;height:400px;background-color:#E0E0EE;">
<div style="width:auto;background-color:blue;height:300px;margin-left:-50px;"></div>
</div>

截图：
[img]http://dl2.iteye.com/upload/attachment/0094/5269/660ef273-9a5f-3121-8e70-42690f1de43e.png[/img]

至于其中的原理还不清楚，主要是因为宽度是auto的原因，当将margin-left设置为-50px时，内部div应该向左边移动，右边空出的位置应该被其他的元素填充，但由于width为auto，所以就由自己来填充；
这只是自己的理解