鍍金池/ 問答/HTML5  HTML/ css line-height 多出 1px

css line-height 多出 1px

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <style>
    #btn {
      background: #f00;
      margin: 0;
      border: 0;
      padding: 0 15px;
      
      display: block;
      line-height:55px;
    }
    #icon {
      background: #000;
      color: #fff;
      
      line-height: 55px;
      display: inline-block;
      vertical-align: middle;
    }
  </style>
  <button id="btn"><span id="icon">hello<span></button>
</body>
</html>

最終的效果卻是下面這樣：

clipboard.png

仔細觀察，父元素頂部多了1px

這是什么原因?qū)е碌摹?/p>

其實我不太關(guān)心這個問題怎么可以解決，而是關(guān)心這個問題出現(xiàn)的原因。

回答
編輯回答
尐懶貓

兩種方法任選其一
1：把#btn{line-height:55px;}去掉，讓#icon 里的line-height去撐開它的父元素;
2：把#icon {display: inline-block}改為icon {display:block};

2017年4月4日 01:47
編輯回答
憶往昔

內(nèi)聯(lián)元素自帶的間距，解決辦法

inline-block => block

或

block元素font-size:0px
inline-block元素font-size:具體大小

2018年3月13日 00:02
編輯回答
離魂曲

垂直對齊的問題，改成

#icon {
    vertical-align: top;
}

你可以參考下這個 CSS深入理解vertical-align和line-height的基友關(guān)系

如果你嘗試了各種vertical-align，你會有更多驚喜。

圖片描述
圖片描述
圖片描述
圖片描述
圖片描述

2017年1月11日 12:07