为什么包含svg的div占用更多空间 [英] Why is the containing div for svg taking more space

问题描述

这段简单的html:

<div style="background:blue">
  <svg width="40" height="40" style="background:red"></svg> some text
</div>

您可以看到svg为40px，但周围的div为44px高(在chrome上测试).

You can see that the svg is 40px but the surrounding div is 44px high (tested on chrome).

为什么.以及如何使周围的div遵守SVG的大小，而在周围的div上没有显式的height并使布局svg+text保持在一行中呢?

Why. And how to make the surrounding div respect the size of the SVG without an explicit height on the surrounding div and keeping the layout svg+text in a single line?

推荐答案

此处的svg元素具有display: inline，因此被视为文本.因此，它还会观察line-height属性，该属性控制每行获得多少额外的垂直空间.出于可读性原因，我们不将直线直接夹在一起.

The svg element here has display: inline, thus is treated like text. It thus also observes the line-height property which controls how much extra vertical space each line gets. For readability reasons we don't cram lines directly together.

在svg上切换到display: block可使div完全适合，就像在div上设置line-height: 0一样.

Switching to display: block on the svg makes the div fit exactly, as does setting line-height: 0 on the div.

这篇关于为什么包含svg的div占用更多空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！