CSS margin全面了解(6)

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

导读：p父元素的高度为300px，子元素的高度为150px，只要margin-top和margin-bottom都为75px，这个盒子就能垂直居中。/p pOK，居中啦！！！/p /div /div divclass=container divclass=boxbox2 p既然子元素的高度是父元素

<p>父元素的高度为300px，子元素的高度为150px，只要margin-top和margin-bottom都为75px，这个盒子就能垂直居中。</p>

</div>

<p>既然子元素的高度是父元素高度的50%，那么只要margin-top和margin-bottom都为25%，应该也能垂直居中。</p>

<p>额，这什么鬼？说好的居中呢？</p>

</div>

</body>

</html>

三、垂直方向上margin的合并

这个问题经常造成一些困惑，不过只需要记住一句话即可，垂直方向上的margin只要亲密接触就会合并，也只有亲密接触才会合并。

垂直方向上margin的合并，如果发生在相邻元素，其实是很好理解的；但是如果发生在父元素与子元素之间，就有些怪异了。

来看例子：

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

<!DOCTYPE html>

<html>

<head>

<title>垂直方向上的margin合并</title>

<style>

.container {

width: 500px;

height: 300px;

margin: 50px auto;

background-color: orange;

}

.box {

width: 300px;

height: 200px;

margin-left: auto;

margin-right: auto;

background-color: cyan;

margin-top: 25px;

padding: 5px;

}

.border {

border: 1px solid black;

/*padding: 1px;*/

}

</style>

</head>

<body>

（编辑：ASP站长网）