父元素line-height設爲0後，inline-block的空元素終於安分了

時間 2019-11-09

標籤元素 line height 設爲 inline block 終於安分简体版

原文原文鏈接

想要畫下圖這個輪播圖按鈕來着，一個<div>，中間三個<span>搞定。
瀏覽器

設置<span>爲inline-block，而後設置寬高，margin-top和margin-bottom同樣的話，<span>就會在<div>裏垂直居中了對吧，然而並無。<div>的高度老是比算出來的高了那麼點，使得<span>並無很完美垂直居中，怪怪的。spa

恩，處處改改改試試試，而後發現是line-height搞的鬼。code

舉個簡單的栗子哈，我有一個<div>，若是line-height不是0，好比line-height是30px，裏面只有一個空的<span>,我設置<span>爲inline-block，而後設置寬度50px，高度和line-height同樣，也是30px，那麼，<div>的高度是否是也是30px呢？是呢？不是呢？blog

HTML代碼：圖片

<body>
  <div>
    <span></span>
  </div>
</body>

CSS代碼：ip

div{
  line-height: 30px;
  background: red;
}
span{
  display: inline-block;
  width: 50px;
  height: 30px;
  background: green;
}

結果是<div>比<span>要高。it

恩哼，好奇怪，我嘗試在<span>裏輸入點啥，結果就正常了。class

因此，爲了避免顯示文本，我能夠在<span>中插入空格符號 ，這樣不影響顯示。cli

或者，把<div>的line-height設爲0，均可以使得<div>高度就是<span>高度。輪播圖

而後我再給<span>加上margin: 10px 0;，好了，<span>在<div>中完美垂直居中了！

若是你在寫CSS過程當中發現元素高度老是比計算的大點，看看是否是line-height在搗亂哦。

再舉個栗子，好比在<a>裏面插入一個<img>，什麼樣式都不設置，<a>的高度會是多少呢？是圖片的高度嗎？仍是瀏覽器默認行高呢？（由於<a>是行內元素）

若是我設置<a>爲display: block;，那麼<a>的高度就是<img>高度嗎？仍是不是呢？

本身動手試試咯。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。