代码之家 › 专栏 › 技术社区 › Sámal Rasmussen

为什么“显示:块”和“显示:柔体”以不同的高度渲染相同的元素?

flexbox css html

Sámal Rasmussen · 技术社区 · 7 年前

我有一个div,里面有一个span。我在div上设置display:block或display:flex,在span上设置一个小字体。令人惊讶的是,这在div上给出了不同的高度。请参见示例。

如果在body或div上设置较小的字体大小,则两者的高度相等。但是如果我像示例中那样在span上设置较小的字体大小,那么div的高度就会不同。怎么会?我能做些什么吗?

span {
  font-size: 0.8rem;
  border: 1px red solid;
}

div {
  border: 1px blue solid;
}

<div style="display: block;">
  <span>test text 1</span>
</div>

<div style="display: flex;">
  <span>test text 2</span>
</div>

1 回复 | 直到 5 年前

Michael Benjamin William Falcon 7 年前

在一个 block formatting context 这个 line-height 财产决定一切。

这是因为 线路高度 建立块级容器内内联级元素和线框的最小高度。

在块格式上下文中 span 是内联级元素,并且 线路高度 应用。

在代码示例中,屏幕上的任何字体大小 跨度 低于1rem将改变 font-size ,但不是 线路高度 ,保持不变。这就是你看到的 font-size: .8rem . 的高度 div 不会改变。除非字体大小超过1rem,否则它不会改变。

在一个 flex formatting context 这个 跨度 是弹性项目。弹性项始终是块级元素(无论元素类型如何)。根据 flexbox spec . 因为没有内联级元素, 线路高度 不适用。

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

总之具有 display: block 这个 线路高度 保持div高度固定。具有 display: flex ,没有 线路高度 干涉和div自由跟踪跨度的高度。

一种解决方案:添加 显示:块 到 跨度 ,消除了 线路高度 问题

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前