Why does SVG with width = 0 and height = 0 take layout space?

css, html, svg

Solution

The `#blue` has not defined the `display` property, so it defaults to `inline`, which according MDN says: "inline | The element generates one or more inline element boxes."

If you set the display to something like `block`, you will see that it takes up no additional space:

body {
  display: flex;
}

.container {
  background-color: #ddd;
  margin-left: 30px
}

#blue {
  border: 1px solid blue;
  display: block;
}

#red {
  border: 1px solid red;
  display: block;
}

<div class="container">
  <svg id="blue" width="0" height="0"></svg>
  <svg id="red" width="100" height="100"></svg>
</div>
<div class="container">
  <svg id="red" width="100" height="100"></svg>
</div>

Of course, if you want to hide it, `display: none` is the way to go.

Problem

Original source