爲什麼CSS高度在這個jsFiddle示例中創建了一個空白？

看到這個的jsfiddle ...爲什麼CSS高度在這個jsFiddle示例中創建了一個空白？

CSS：

a {display:inline-block;background:gold} 
a > * {display:inline-block;margin:0} 
p {width:auto;line-height:30px;background:yellowgreen} 
div {width:30px;height:30px;background:orangered}

HTML：

<a> 
    <p>left</p> 
    <div></div> 
</a>

現在，爲什麼在右邊設置height:30px到div產生間隙在左邊p以上？我該如何擺脫它？

我只是想容器a是30像素高和沒有更多。另外，我希望它的孩子排隊。因爲無論是<p>和<div>是內聯元素，它們對齊到基線

p { 
    vertical-align:top; 
}

來源

2012-06-08 jedmao

請在這裏發表您的代碼。如果jsFiddle失敗了，你的問題就沒用了。 –

澄清你最終想要的樣子嗎？ – Wagtail

可以從P標籤的默認行爲中產生額外的空間。 –

簡單a > * {float:left}解決我的問題......

a {display:inline-block;background:gold} 
a > * {margin:0;float:left} 
p {line-height:30px;background:yellowgreen} 
div {width:30px;height:30px;background:orangered}

來源

2012-06-08 20:52:02 jedmao

請注意：'float：left;'覆蓋'display：inline-block;' – Neil

爲什麼您需要元素裏面有一個內聯塊？ –

@BehnamEsmaili，我想我沒有。感謝您指出了這一點。 – jedmao

-1

這也許可以解決問題。

對於您的<div>，它沒有文字，因此其基數就是其基準。

對於您的<p>，其基數將成爲垂直居中文本的基線。

有多種方法可以應用vertical-align來覆蓋默認對齊方式。

來源

2012-06-08 19:58:18

這樣可以解決排隊問題，但'a'標籤內容的底部仍然存在間隙。 – jedmao

-1

：

來源

2012-06-08 20:11:07 Neil

文本不是以垂直爲中心的。它是行高：30px。我仍然無法得到這個工作。你可以修改jsFiddle工作嗎？ – jedmao

@sfjedi嘗試'a> * {display：inline-block; margin：0; vertical-align：bottom;}' – Neil

爲什麼CSS高度在這個jsFiddle示例中創建了一個空白？

回答

相關問題