Article directory
Margins on empty elements do not take effect
The height, border, and padding of an empty element are all 0, and the top and bottom margins are 20px, so the height of the box model of this empty element is 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;
}
Effect: the content takes effect
No content will not take effect .
The padding of empty elements takes effect
The height, border, and outer margin of an empty element are all 0, and the upper and lower inner margins are 20px, so the height of the box model of this empty element is 40px
css：
.a {
padding:20px;
background-color:red;
}
.b {
padding:20px;
background-color:green;
}
