为什么给a标签设置font-size=12px后会和浏览器顶部有空隙?

html
image.png
css
image.png
实际效果
image.png

当a设置font-size=12px后为什么会距离顶部有空隙?
image.png

然后给a设置float:left后,a距离顶部又没有空隙了
image.png

或者在a设置font-size=12px后a不设置float:left,而是*{font-size: 12px},a距离顶部的空隙也消失了
image.png

想知道这是为什么...求解答

阅读 1.8k
1 个回答

这是由子元素和父元素字体大小不一致导致 inline 元素的基线对齐问题。修改方法:

  1. 去掉 HTML 中的 <!DOCTYPE html>,不推荐这么做
  2. 设置 a 元素和 p 元素的父元素字体大小为 12px
  3. 设置 a 这种 inline 元素的样式为 vertical-algin: top
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题