标签：oct gre play meta red back bottom splay head
1、盒子里有内容时，是内容顶部与内容顶部对齐,有border-top或margin-top时，border-top或margin-top凸出在对齐线上面。
2、盒子里无内容时，是margin-bottom底部与margin-bottom底部对齐；无border-bottom和margin-bottom时，内容的底部与margin-bottom的底部对齐；有border-bottom且无margin-bottom时，border-bottom的底部与margin-bottom的底部对齐。
3、有的盒子有内容，有的盒子没内容，有内容盒子的内容底部与无内容盒子的margin-bottom的底部对齐。
4、示例如下：
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{padding:0;margin:0;}
</style>
</head>
<body>
<div style="display: inline-block;height:50px;width:100px;background:red;">0</div>
<div style="display: inline-block;height:40px;width:100px;background:red;border-top:25px solid green;">0</div>
<div style="display: inline-block;height:60px;width:100px;background:red;border-top:25px solid green;margin-top:30px;">0</div>
<div style="display: inline-block;height:50px;width:100px;background:red;"></div>
<div style="display: inline-block;height:40px;width:100px;background:red;border-bottom:25px solid green;"></div>
<div style="display: inline-block;height:60px;width:100px;background:red;border-bottom:25px solid green;margin-bottom:30px"></div>
</body>
</html>
```
标签：oct gre play meta red back bottom splay head
原文地址：https://www.cnblogs.com/gushixianqiancheng/p/10966658.html
