当我们将两个div这是成display: inline-block;,会发现顶部有错位的现象。
vertical-align属性
vertical-align属性只在display: inline-block;时起作用，且默认值为baseline,也就是说内部的文字会按照基线对齐。所以解决这一办法将vertical-align设置为top即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
#model1,#model2{
width: 200px;
height: 180px;
border: 1px solid black;
display: inline-block;
vertical-align: top;/*解决两个盒子对不齐的情况*/
padding: 10px;
}
</style>
</head>
<body>
<div id="model1"></div>
<div id="model2"></div>
</body>
<html>