对line-hight和hight的使用

￡神魔★判官ぃ 2022-04-10 09:31 76阅读 0赞

行高line-height，是文本行基线这件的距离，不是字体大小，它确定了各个元素框的高度增加或减少多少。

对于块级元素：定义了元素中文本基线之间的最小距离。

line-height并不影响替换元素的布局，但是确实可以应用到替换元素。

行间距：line-height - font-size

定义font属性的时候，用户代理会自动会生成一个line-height。

<table> 
 <tbody> 
  <tr> 
   <td>浏览器</td> 
   <td colspan="7">&nbsp;FF</td> 
  </tr> 
  <tr> 
   <td>&nbsp;字体大小（font-size）</td> 
   <td>&nbsp;12px&nbsp;</td> 
   <td>&nbsp;13px</td> 
   <td>14px /15px</td> 
   <td>16px&nbsp;</td> 
   <td>18px&nbsp;</td> 
   <td>20px&nbsp;</td> 
   <td>22px&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;行高（line-height）</td> 
   <td>&nbsp;17px</td> 
   <td>&nbsp;19px</td> 
   <td>&nbsp;20px</td> 
   <td>&nbsp;21px</td> 
   <td>&nbsp;24px</td> 
   <td>&nbsp;27px</td> 
   <td>&nbsp;30px</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>浏览器</td> 
   <td colspan="7">&nbsp;Chrome</td> 
  </tr> 
  <tr> 
   <td>&nbsp;字体大小（font-size）</td> 
   <td>&nbsp;12px&nbsp;</td> 
   <td>&nbsp;13px</td> 
   <td>14px /15px</td> 
   <td>16px&nbsp;</td> 
   <td>18px&nbsp;</td> 
   <td>20px&nbsp;</td> 
   <td>22px&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;行高（line-height）</td> 
   <td>&nbsp;17px</td> 
   <td>&nbsp;19px</td> 
   <td>&nbsp;20px</td> 
   <td>&nbsp;21px</td> 
   <td>&nbsp;24px</td> 
   <td>&nbsp;27px</td> 
   <td>&nbsp;30px</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>浏览器</td> 
   <td colspan="7">&nbsp;IE9</td> 
  </tr> 
  <tr> 
   <td>&nbsp;字体大小（font-size）</td> 
   <td>&nbsp;12px&nbsp;</td> 
   <td>&nbsp;13px</td> 
   <td>14px&nbsp;</td> 
   <td>16px&nbsp;</td> 
   <td>18px&nbsp;</td> 
   <td>20px&nbsp;</td> 
   <td>22px&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;行高（line-height）</td> 
   <td>&nbsp;15.8px</td> 
   <td>&nbsp;17.2px</td> 
   <td>&nbsp;18.5px</td> 
   <td>&nbsp;21.2px</td> 
   <td>&nbsp;23.8px</td> 
   <td>&nbsp;26.4px</td> 
   <td>&nbsp;29px</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>浏览器</td> 
   <td colspan="7">&nbsp;360</td> 
  </tr> 
  <tr> 
   <td>&nbsp;字体大小（font-size）</td> 
   <td>&nbsp;12px&nbsp;</td> 
   <td>&nbsp;13px</td> 
   <td>14px /15px</td> 
   <td>16px&nbsp;</td> 
   <td>18px&nbsp;</td> 
   <td>20px&nbsp;</td> 
   <td>22px&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;行高（line-height）</td> 
   <td>&nbsp;17px</td> 
   <td>&nbsp;19px</td> 
   <td>&nbsp;20px</td> 
   <td>&nbsp;21px</td> 
   <td>&nbsp;24px</td> 
   <td>&nbsp;27px</td> 
   <td>&nbsp;30px</td> 
  </tr> 
 </tbody> 
</table>

在inline元素中，不是文字撑开了div的高度，而是line-height！