Doubts about flow-model with respect to svg

Question

I have the following code:

body {              background-color: black; }
.root {             background-color: aqua; }
.svg-container {    background-color: lightgray; }
svg {               background-color: red; }
.btn {              background-color: yellow; }

.svg-container, .btn {
    display: inline-block;
}
svg {
    height: 60px;
    width: 60px;
}

svg, .svg-container, .btn {
    margin: 0;
    padding: 0;
    border: 0;
}

<html>
<head></head>
<body>
    <div class="root">
        <div class="svg-container">
            <svg></svg>
        </div>
        <button class="btn">Button</button>
    </div>
</body>

</html>

I expected the height of .svg-container to be exactly equal to the containing svg = 60px. Further, the .btn should have been on the top side and not bottom. Another interesting thing with .btn is that it has a lot of space above it yet there some gap between the .btn and the containing .div.

Why is it happening?

score 0 · Answer 1 · answered Apr 12 '17 at 09:53

That is because you are using inline-block for your SVG element. Although it retains some block-level styling possibilities (such as the ability to explicitly declare vertical dimensions, paddings, and margins), it also shows some inline element behavior, such as alignment to the baseline.

If you look at your code snippet, the bottom of your inline-block SVG is flush with the baseline of the button text next to it. The additional space underneath all inline and inline-block elements are space reserved for descender on glyphs, like the hanging parts of characters like g, p, `q.

Doubts about flow-model with respect to svg

1 Answers1