標題頂部的多餘空間

我有兩個寬度分別爲300px的框，顯示爲inline block。父容器爲600px，寬度爲font-size: 0。在這些框中，標題h3的頂邊空白爲20px。現在，如果h3中的兩個字符串都相等，則塊會正確顯示，但只要我使一個h3具有較小的字符串，它就會關閉。不應該在頂部對齊嗎？我該如何解決它？標題頂部的多餘空間

HTML

<div class="post-pack-fix"> 

<div class="home-box"> 

<h3><a href="#">Some title of the</a></h3> 

<div class="meta"> 
<a href="#">wordpress</a>/2 days ago 
</div> 

<p> 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip 
<a href="#" class="more"> read more &raquo; </a></p> 

</div> 
<div class="home-box"> 

<h3><a href="#">Some title of the post related to this</a></h3> 

<div class="meta"> 
<a href="#">wordpress</a>/2 days ago 
</div> 

<p> 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip 
<a href="#" class="more"> read more &raquo; </a></p> 

</div> <!-- end home box --> 

</div> <!-- post pack fix -->

樣式

.post-pack-fix { 
    font-size: 0; 
    margin-bottom: 23px; 
} 

.home-box { 
    width: 300px; 
    padding-right: 20px; 
    display: inline-block; 
} 

.home-box h3 { 
    color: #464646; 
    font-size: 20px; 
    margin: 20px 0 9px 0; 
    line-height: 23px; 
    font-weight: 400; 
}

平等 'H3' 串正確顯示

來源

2015-11-18 mallaudin

你不同意你的整個HTML和CSS，所以我不能發佈一個完整的例子來證明這一點...... –

感謝@jonathan ..我得到了它 – mallaudin

羅現在的罰款。如果你看到我的例子，我用我自己修改過的Lorem Ipsum版本的代碼。 –

添加vertical-align: top到第一<div>。

這是由於兩個<div> s默認排列在基線上（vertical-align: baseline）所致，如您在圖片中看到的。

查看this JSFiddle作爲一個工作示例。嘗試刪除vertical-align: top，看看會發生什麼。

來源

2015-11-18 06:05:19

感謝@Jonathan ....那就是訣竅。 – mallaudin

@mallaudin我很高興我的幫助（只是不要忘記接受=））！ –

當然... 10分鐘後我可以接受.. – mallaudin

inline-block元素的默認CSS屬性爲vertical-align:baseline。因此，如果您想更改對齊方式，請將其應用於您的home-box代碼中。

.home-box { 
    width: 300px; 
    padding-right: 20px; 
    display: inline-block; 
    vertical-align:top; 
}

來源

2015-11-18 06:11:44

是的。有效。謝謝@Suresh :) – mallaudin

標題頂部的多餘空間

回答

相關問題