CSS margin全面了解(9)

发布时间：2020-03-15 14:09 所属栏目：52 来源：站长网

导读：divclass=box p可是我就是想让子元素距离父元素的上边界25px啊，我不想让它们合并呀。/p p很简单，给父元素加个边框，它们就无法亲密接触了，就不会合并了� �/p p或者给父元素设置padding也是可以的喔。/p /div /di

<p>可是我就是想让子元素距离父元素的上边界25px啊，我不想让它们合并呀。</p>

<p>很简单，给父元素加个边框，它们就无法亲密接触了，就不会合并了啊。</p>

<p>或者给父元素设置padding也是可以的喔。</p>

</div>

</body>

</html>

消除垂直方向上margin合并的方法：给父元素加border或者加padding，打破父元素与子元素margin之间的亲密接触即可。

margin合并的规则：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>

<html>

<head>

<title>margin合并规则</title>

<style>

.container {

width: 300px;

height: 500px;

margin: 50px;

background-color: orange;

float: left;

border: 1px solid black;

}

.box1,.box2,.box3,

.box4,.box5,.box6 {

width: 200px;

height: 150px;

margin: 30px auto;

background-color: cyan;

text-align: center;

line-height: 150px;

}

.box1 {

margin-bottom: 30px;

}

.box2 {

margin-top: 20px;

}

.box3 {

margin-bottom: 30px;

}

.box4 {

margin-top: -30px;

}

.box5 {

margin-bottom: -30px;

}

.box6 {

margin-top: -50px;

background-color: green;

}

p {

width: 220px;

margin:10px auto;

font-size: 16px;

line-height: 1.5;

}

</style>

</head>

<body>

（编辑：ASP站长网）