[英]Element with font-size less than 1em does not cover parent element
A child element with a font-size less than 1 is not the same size as its parent. font-size 小于 1 的子元素与其父元素大小不同。
Why does the child element not cover the parent element completely?为什么子元素没有完全覆盖父元素? Shouldn't be the parent size the same as child size?父尺寸不应该与子尺寸相同吗?
It seems that the height of parent is calculated by the font-size of 1em.好像parent的高度是根据1em的font-size算出来的。 Setting parent to display:inline-block
also does not work.将 parent 设置为display:inline-block
也不起作用。
<span id="parent" style="background: blue; font-size: 10rem;"> <span id="child" style="background: red; font-size: 0.7em">text</span> </span>
A span
is a subset of flow which is phrasing content whereas for instance a div
is flow content. span
是流的子集,它是措辞内容,而例如div
是流内容。 Here if we uncomment the CSS for display: block;
在这里,如果我们取消注释 CSS 以display: block;
it turns it into flow content and covers the container as "flow";它把它变成流内容并覆盖容器作为“流”;
The following reference has a "visual" of some categories.以下参考了一些类别的“视觉”。
Reference for elements of content category: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories内容类别元素参考: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories
Note the second gives it the nearly the same as a div
注意第二个给它几乎与div
相同
#parent { background-color: blue; font-size: 10rem; } #child { background-color: red; font-size: 0.7em; /* uncomment display to see flow content */ /* display:block; */ }
<span id="parent"> <span id="child">text</span> </span>
uncommented:未评论:
#parent { background-color: blue; font-size: 10rem; } #child { background-color: red; font-size: 0.7em; /* uncomment display to see flow content */ display:block; }
<span id="parent"> <span id="child">text</span> </span>
1.) span
elements are inline
elements. 1.) span
元素是行inline
元素。 Their line-height
(which in this case is their height) depends on the their font-size, so their actual height depends on their font-size
, unless they have a display
setting of block
.它们的line-height
(在本例中是它们的高度)取决于它们的字体大小,因此它们的实际高度取决于它们的font-size
,除非它们的display
设置为block
。
2.) rem
is relative to the font-size
defined for html
- if there is no rule for that, there will be a browser setting. 2.) rem
相对于为html
定义的font-size
- 如果没有规则,将有一个浏览器设置。
3.) em
is relative to the font-size
for the element itself. 3.) em
与元素本身的font-size
有关。 If the font-size
for a span
is defined in em
units, it will depend on its parent elements font-size
setting.如果span
的font-size
以em
为单位定义,则它将取决于其父元素font-size
设置。 In your case the parent has a setting relative to html
, the child has a setting relative to the parent, so NO, it's height won't be the same as the parent's height, but 0.7 times as much, ie only 70% of the parent height.在你的情况下,父母有一个相对于html
的设置,孩子有一个相对于父母的设置,所以不,它的高度不会与父母的身高相同,而是 0.7 倍,即只有 70%父母身高。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.