html – 为什么显示：块和显示：flex渲染具有不同高度的相同元素？

概述所以我有一个跨越内部的div.我正在设置显示：块或显示：div上的flex,以及跨度上的小字体大小.令人惊讶的是,这给了div不同的高度.查看示例. 如果我在body或div上设置较小的font-size,则两者的高度相等.但是,如果我在示例中设置较小的字体大小,则div会达到不同的高度.怎么会？我可以做些什么吗？ span { font-size: 0.8rem;}div { bo @H_419_1@ 所以我有一个跨越内部的div.我正在设置显示：块或显示：div上的flex,以及跨度上的小字体大小.令人惊讶的是,这给了div不同的高度.查看示例.

如果我在body或div上设置较小的Font-size,则两者的高度相等.但是,如果我在示例中设置较小的字体大小,则div会达到不同的高度.怎么会？我可以做些什么吗？

span {  Font-size: 0.8rem;}div {  border: 1px solID;}

<div >  <span>test text 1</span></div><div >  <span>test text 2</span></div>

解决方法 在 block formatting context中,行高属性有所不同.

这是因为行高确定了块级容器内的内联级元素和行框的最小高度.

在块格式化上下文中,span是内联级元素,并且适用行高.

在代码示例中,1rem以下范围内的任何字体大小都将@R_227_6502@大小,但不会更改仍保持固定的行高.这就是你所看到的Font-size：.8rem. div的高度不会改变.除非字体大小超过1rem,否则它不会改变.

在flex formatting context中,跨度是d性项目. flex项始终是块级元素(无论元素类型如何).根据flexbox spec,Flex项目被“阻塞”.因为没有内联级元素,所以行高不适用.

此外,flex容器的初始设置是align-items：stretch.这意味着跨度设置容器的高度.

总之,使用display：block,line-height保持div高度固定.使用display：flex,没有行高干扰,div可以自由跟踪跨度的高度.

一种解决方案：添加显示：阻止跨度,这消除了行高问题.

总结

以上是内存溢出为你收集整理的html – 为什么显示：块和显示：flex渲染具有不同高度的相同元素？全部内容，希望文章能够帮你解决html – 为什么显示：块和显示：flex渲染具有不同高度的相同元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。