【CSS】如何清除vertical-align屬性產生的中間空隙
阿新 • • 發佈：2018-11-30
在使用display:inline-block這個屬性的時候，進行行內並排，往往不會按照你預期的方式進行佈局排列。
下面看看這個例子出現的問題：
程式碼例項：
<!DOCTYPE html> <html> <head> <style type="text/css"> .container { border:3px solid #fdc72f; } .content_1 { display: inline-block; vertical-align:top; width:25%; background-color: #d64078; } .content_2 { display: inline-block; vertical-align:top; width:25%; background-color: #d64078; } .content_3 { display: inline-block; vertical-align:top; width:25%; background-color: #d64078; } .content_4 { display: inline-block; vertical-align:top; width:25%; background-color: #d64078; } </style> </head> <body> <div class="container"> <div class="content_1"> 我是內容一。 </div> <div class="content_2"> 我是內容二。 </div> <div class="content_3"> 我是內容三。 </div> <div class="content_4"> 我是內容四。 </div> </div> </body> </html>
效果圖如下：
本來每個div佔寬25%應該把這一行佔滿，但是並沒有，而且第四個div還跑到了第二行，除此之外，它們之間還存在著縫隙。
產生這些縫隙的原因是這中間有些空白字元。那麼消除這些空白字元的辦法就是給其父元素設定font-size:0。
程式碼如下所示:
<!DOCTYPE html> <html> <head> <style type="text/css"> .container { border:3px solid #fdc72f; font-size:0; } .content_1 { display: inline-block; vertical-align:top; width:25%; background-color: #d64078; } .content_2 { display: inline-block; vertical-align:top; width:25%; background-color: #d64078; } .content_3 { display: inline-block; vertical-align:top; width:25%; background-color: #d64078; } .content_4 { display: inline-block; vertical-align:top; width:25%; background-color: #d64078; } </style> </head> <body> <div class="container"> <div class="content_1"> 我是內容一。 </div> <div class="content_2"> 我是內容二。 </div> <div class="content_3"> 我是內容三。 </div> <div class="content_4"> 我是內容四。 </div> </div> </body> </html>
效果圖如下：
當給父元素設定font-size:0後，發現文字消失了，結果變成了上圖的樣子。
是由於自身未對文字設定font-size，是繼承了父元素的font-size，所以再給子元素賦值font-size就能夠得到想要的結果。
程式碼如下所示：
<!DOCTYPE html> <html> <head> <style type="text/css"> .container { border:3px solid #fdc72f; font-size:0; } .content_1 { display: inline-block; vertical-align:top; width:25%; font-size:16px; background-color: #d64078; } .content_2 { display: inline-block; vertical-align:top; width:25%; font-size:16px; background-color: #d64078; } .content_3 { display: inline-block; vertical-align:top; width:25%; font-size:16px; background-color: #d64078; } .content_4 { display: inline-block; vertical-align:top; width:25%; font-size:16px; background-color: #d64078; } </style> </head> <body> <div class="container"> <div class="content_1"> 我是內容一。 </div> <div class="content_2"> 我是內容二。 </div> <div class="content_3"> 我是內容三。 </div> <div class="content_4"> 我是內容四。 </div> </div> </body> </html>
效果圖如下：
