35displayinline-block的上下对齐方式
Posted gushixianqiancheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了35displayinline-block的上下对齐方式相关的知识，希望对你有一定的参考价值。
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>
```
以上是关于35displayinline-block的上下对齐方式的主要内容，如果未能解决你的问题，请参考以下文章