Question

jsFiddle：Problem

在上面的小提琴中，2个<p>元素被转换为内联块，而后者包含<a>标记，使用css将其转换为块框。问题是第一个内联块不符合第二个内联块。

它出现在Chrome＆amp; 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

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

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

JSFiddle Demo

内联块元素与另一个内置块元素的内联块元素不一致

1 个答案: