【css】使用margin时易出现的错误

最新推荐文章于 2024-10-02 06:15:00 发布

汪小穆

最新推荐文章于 2024-10-02 06:15:00 发布

阅读量1.8k

点赞数 5

分类专栏： css 文章标签： margin margin的问题 margin-top margin-top值传递给了父级 margin-top失效

本文链接：https://blog.csdn.net/w390058785/article/details/80461324

版权

css 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

前言：margin在布局的时候还是蛮常用到，不过margin还是容易产生一些问题的。

一、margin-top传递给了父级。

<body>
<style>
body { margin:0; background:pink; }
.box1 { width:200px; height:200px; background:#333;}
.box2 { width:100px; height:100px; margin-top:100px; margin-left:100px; background:#666;}
</style>
<div class="box1">
	<div class="box2">
    
    </div>
</div>
</body>

想要实现的效果：想要让box2在box1里面，距离box1上边为100px; 距离左边为100px;

实际运行的效果：

这时候发现，box2在box1里面确实是距离左边是100px的，奇怪的是，box2在box1里面距离上边的为0px,而且box1距离body的距离为100px;了。这就是box2把margin-top值，传递给了父级。

解决方法①：给父级添加border边框

<body>
<style>
body { margin:0; background:pink; }
.box1 { width:200px; height:200px; background:#333; border:1px solid #000;}
.box2 { width:100px; height:100px; margin-top:100px; margin-left:100px; background:#666;}
</style>
<div class="box1">
	<div class="box2">
    
    </div>
</div>
</body>

解决方法②：给父级添加overflow:hidden;

<body>
<style>
body { margin:0; background:pink; }
.box1 { width:200px; height:200px; background:#333; overflow:hidden;}
.box2 { width:100px; height:100px; margin-top:100px; margin-left:100px; background:#666;}
</style>
<div class="box1">
	<div class="box2">
    
    </div>
</div>
</body>

这两个方法都很好的解决了这问题。

二、上下方向margin重叠问题。

<body>
<style>
body { margin:0; background:pink; }
div { float:left;  }
.box1 { width:100px; height:100px; background:#333; margin-right:100px; }
.box2 { width:100px; height:100px; background:#666; margin-left:120px;   }
</style>
<div class="box1"></div>
<div class="box2"></div>
</body>

box1跟box2的距离为220px;说明两者间的距离为两者maigin值的相加；这并没有问题，而问题是出现在margin-top跟margin-bottom;

②margin-top跟maigin-bottom的问题。

<body>
<style>
body { margin:0; background:pink; }
.box1 { width:100px; height:100px; background:#333; margin-bottom:100px; }
.box2 { width:100px; height:100px; background:#666; margin-top:120px;   }
</style>
<div class="box1"></div>
<div class="box2"></div>
</body>

运行代码发现

box1跟box2的距离不是220px; 也不是100px; 最终是120px。相反反向的margin会重叠，距离的值取决于大的值。这要特别注意跟margin-left、margin-right的区别了。

三、行内元素使用margin问题

行内元素可以使用margin-left跟margin-right。但是不能使用margin-top跟margin-bottom

<body>
<style>
    div { height:50px; overflow:hidden; background:#ccc; margin-bottom:10px; }
    span { background:pink; }
</style>
    <div>
        <span>123</span> 
    </div>
    <div>
        <span style="margin-left:20px;">123</span> 
    </div>
    <div>
        <span style="margin-top:20px;">123</span> 
    </div>
</body>

运行结果：