html - 内联 block 元素与另一个内含 block 元素的内联 block 元素不在一条直线上

Question

jsFiddle:Problem

在上面的 fiddle 中，2 <p>元素变成内联 block ，后者包含一个 <a>使用 css 变成 block 框的标签。问题是第一个 inline-block 与第二个行不一致。

它出现在 Chrome 和 Firefox 中。谁能解释这种行为。

HTML

<div id="wrapper">
<p id="p1">
 PINK is paragraph No.1
</p>

<p id="p2" class="myp2">
<a id ="run-fiddle" href="#">Para 1 </a>
 YELLOW is paragraph No.2.
</p>
</div>

CSS

#wrapper{
  background-color:#eee; border:1px solid #aaa;
  margin: 10px auto;
 text-align:center;
 padding:0 50px;}

p { 
 width: 100px; height: 75px;
 background: pink; color: blue;
 padding:10px; 
 font-size:14px;
 display:inline-block;} 

p#p2{background: yellow; }

#wrapper .myp2 a{ border:1px solid black;
display:block; margin-bottom:10px }

#wrapper .myp2 a{ color:red; text-align:center;}
#p2 a{ color:white; text-align:left;}
#run-fiddle {color: pink; text-align:right}

Answer 1

这是因为默认情况下，inline-block 元素与其周围元素的基线对齐。 This excellent CSS Tricks article may help you understand it better .

在 p 上使用 vertical-align:top;:

p {
  width: 100px;
  height: 75px;
  background: pink;
  color: blue;
  padding: 10px;
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
}

JSFiddle Demo