定位的父元素內的子元素

我想了解CSS的基礎知識，我遇到了一個問題，其中我有一個導航元素與3個div元素內。 div元素顯示爲內聯塊，因此所有元素都在nav元素中對齊。定位的父元素內的子元素

當我在第一個div中添加一個段落元素時會發生問題。突然，第一個div與另外兩個不一致。我使用Chrome的開發者工具來查看發生了什麼。帶p元素的div沒有任何邊距或填充。默認情況下，段落標記具有16px的邊距，但是當我將其設置爲0時，容器div仍未對齊，所以我不認爲這是問題所在。

有人能解釋是什麼導致第一個div從原來的位置移動，當我添加像p一樣的子元素？

p的高度小於包含div的高度。 p的邊距似乎並不重要，因爲我將它設置爲0，並且div仍未對齊。

的jsfiddle：http://jsfiddle.net/jjF7R/

HTML

<nav> 
<div> 
    <p>hi</p> 
</div> 

<div> 
</div> 

<div> 
</div> 
</nav>

CSS

nav{ 
width:330px; 
height:50px; 
border:1px solid black; 
display:inline-block; 
} 

div{ 
width:100px; 
border:1px solid blue; 
height:100%; 
display:inline-block; 
}

來源

2014-06-09 user3029001

您需要添加vertical-align:top到div規則：

div { 
    width:100px; 
    border:1px solid blue; 
    height:100%; 
    display:inline-block; 
    vertical-align:top; 
}

jsFiddle example

內聯元素的默認垂直對齊是baseline，這是您在原始代碼中看到的內容。

來源

2014-06-09 20:56:14 j08691

ohh好的，謝謝你的答案 – user3029001

div{ 
    width:100px; 
    border:1px solid blue; 
    height:100%; 
    display:inline-block; 
     vertical-align: top; /* middle, bottom... whatever is needed */ 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

它發生的原因進入在行高度規則，設計人員使用的Helvetica和強大的野獸世界inline-block元素成爲受上下文流程的墊襯的後正在尋找... :)

來源

2014-06-09 20:56:16

用戶