html - 为什么inline-block元素并排，会以 margin-top 值大的为准？
本文介绍了html - 为什么inline-block元素并排，会以 margin-top 值大的为准？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<style type="text/css">
body {
background-color: #ececec;
}
.div-1 {
width: 500px;
height: 500px;
margin: 50px;
border: 1px solid #000000;
position: relative;
}
h1{
display: inline-block;
background-color: aqua;
}
.div-2 {
display: inline-block;
width: 300px;
height: 300px;
background-color: #4169E1;
}
</style>
<body>
<div class="div-1">
<h1>hello,world</h1>
<div class="div-2">
</div>
</div>
</body>
如图、我并没有给 h1 标签设置 margin，但是为什么它会在下面和 div 并排，而不是上面？
解决方案
这个跟vertical-align有关系。它的默认是是baseline， 把它改成top就好了
http://codepen.io/jackpan/pen...
这篇关于html - 为什么inline-block元素并排，会以 margin-top 值大的为准？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
