如何理解margin值为负

最新推荐文章于 2024-08-24 17:13:38 发布

goodgirl1991

最新推荐文章于 2024-08-24 17:13:38 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css

本文链接：https://blog.youkuaiyun.com/goodgirl1991/article/details/50419167

html/css 专栏收录该内容

16 篇文章

订阅专栏

本文详细解释了在网页布局中使用负margin的概念及其实际应用，通过代码示例展示了如何利用负margin使元素从边界的内部开始定位，从而实现更灵活的布局设计。

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

通常来说margin为正值时，我们很清楚其布局形式，即在border边界线处再往外扩展指定长短。可margin为负又表示什么呢，表示始于border边界线处并向内扩展指定长短，这样，下一个文档流对象便是从margin边界线处起，显示出来。代码示例：

<div style="margin-right:-100px; background-color:#CCCCCC; width:200px;">1</div>

页面效果：

此时有一个margin边界线我们看不到，其位置是在border边界线向内100px处，即200-100=100px处。

<div style="margin-right:-100px; background-color:#CCCCCC; height:100px; width:200px;"></div>
<div style="width:150px; float:left; background-color:#0033CC; height:100px;">

我们看，此时由于两个div标签为块级元素，故不涉及到右margin边界线，两个对象完全显示出其定义的长度和宽度。

<div style="margin-right:-100px; background-color:#CCCCCC; height:100px; width:200px; float:left;"></div>
<div style="width:150px; float:left; background-color:#0033CC; height:100px;">

此时由于float：left作用，两个块级元素显示到了一行内，第二个div标签的起始处便是右margin边界，即100px处，而非border边界处200px处。