对a标签设置字体大小的时候会如何影响包容他的p标签的外边距和高度...

发布网友发布时间：2022-04-30 16:35

共1个回答

热心网友时间：2022-04-21 03:48

有兴趣读读两篇文章
'http://www.hu.com/question/20407685'

Line height calculations: the 'line-height' and 'vertical-align' properties
‘http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced’

The height of a line box is determined as follows:
1.The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in"Leading and half-leading".)
2.The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
3.The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under'line-height' below.)

我先跟你说原因吧，
p设置了line-height:20px;
但是p的实际高度是66px 多出来了6个像素就是因为a标签的高度被错误计算了
上面英文说了它的高度是由3点决定，上面第2点最关键，如果你想计算最小的高度，那么你必须给他设置vertical-align为top或者bottom，这个地方你设置子元素a标签vertical-align:top;也能得到
p标签设置font-size:12px的效果，我其实也不算太明白为什么设置p的font-size会得到那样的效果，推测，估计是设置font-size，会调整基线的位置吧
另外延伸出，我以前也遇到的一个问题，div高度不设置包住一个img元素
div里面包含一个img元素和你遇到的这个问题一样，div的高度我们会认为应该＝img自身高度，但是实际上大于img高度，就在于基线的问题，反正这个挺复杂的，记住如果要计算行内元素的最小高度，一定要设置他的vertical－align为top或者bottom
如果题主看了文章有什么比较好的发现，也可以告知下，互相学习