为什么inline-block元素并排,会以 margin-top 值大的为准? 财富值63

2016-10-16 17:17发布

<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 并排,而不是上面?

1条回答

这个跟vertical-align有关系。它的默认是是baseline, 把它改成top就好了
http://codepen.io/jackpan/pen...

一周热门 更多>