Why the contained div for svg takes up more space

Question

This simple html snippet:

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

You can see that svg is40px, but the surrounding div is set to44pxhigh (checked on chrome).

Why. And how to make the surrounding div respect the size of the SVG without explicitheighton the surrounding div and keep thesvg+textlayout on the same line?

+6

htmlcsssvg

basaratSep 27 '16 at 5:04

sourceshare

Answer 1

Thesvgelement hasdisplay: inline, so it is treated as text. Thus, it also saves theline-height, which controls how much extra vertical space each row gets. For readability reasons, we do not insert rows directly.

Switching todisplay: blockonsvgmakes setting thedivexactly as settingline-height: 0on thediv.