文章讨论了在CSS中，空元素的外边距与内边距如何影响其框模型高度。空元素的外边距不生效，即使设置了上下20px的外边距，元素高度仍为0。然而，内边距对空元素是生效的，上下各20px的内边距会使空元素的框模型高度达到40px。这展示了CSS布局中的一个重要特性。
空元素的外边距不生效
一个空元素的高度、边框、内边距都是0，上下外边距为20px，那么这个空元素的框模型的高度为0
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<div class='a'>1</div>
<div class='b'>2</div>
</body>
</html>
css：
.a {
margin:20px;
background-color:red;
}
.b {
margin:20px;
background-color:green;
}
效果：有内容生效
无内容不生效。
空元素的内边距生效
一个空元素的高度、边框、外边距都是0，上下内边距为20px，那么这个空元素的框模型的高度为40px
css：
.a {
padding:20px;
background-color:red;
}
.b {
padding:20px;
background-color:green;
}
扫一扫
1776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
