首页 > a标签等行内元素宽高问题

a标签等行内元素宽高问题

问题1:行内元素是否没有宽高 还是说不能设置宽高 亦或者宽高由字体多少和大小决定?如果行内元素没有宽高但它又能设置背景颜色是为何?
问题2:比如a标签,我将它的字体大小设置为16px,但在浏览器中查看时元素的高度为21px,多了5px,请问这5px是怎么来的?


display:inline

属性的元素默认宽高属性是auto,设置了浏览器也会变成auto,所以想要设置元素的宽高,需要把元素变成块元素,即

display:block


默认宽高是浏览器自动计算的inline元素内文本占据的行高等的高度,所以可以设置背景色

inline元素的高度与font-size相关,但不是font-size决定,
涉及到匿名框,行框,行内框,内容区等

font-size决定匿名框,匿名框构成内容区,内容区加行间距得到行内框高度,行内框的最高,最低点的最小框构成行框;

行间距是line-height与font-size之差,上下各1/2分布内容区上下

默认情况下,line-height:nomarl,转换成数字比1大,字体不同,行高也会不同

所以,你的字体是16px,但元素高度大于16


问题1 行内元素不能设置宽高,只能由字体撑开
问题2 你可以打开开发者功能,看一下盒模型,是否有些其他默认样式的 如:margin 、padding导致

    我在chrome下看,a标签字体设置12,查看元素,高度仍是12

【热门文章】
【热门文章】