CODEWITHSUNDEEP
htmlcsssvg
Misha Moroshko
Misha Moroshko

Reputation: 171321

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

Could you explain why does the first SVG in the following example take layout space even though it has width="0" and height="0"?

Is it possible to style it in a way that won't affect the layout?

body {
  display: flex;
}

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

#blue {
  border: 1px solid blue;
}

#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>

Upvotes: 4

Views: 3258

Answers (3)

Automatico
Automatico

Reputation: 12916

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.

Upvotes: 10

user7896971
user7896971

Reputation:

Use display: none; property to not display the element. Also do not use same ID for two elements(You have used ID "red" for 2 SVGs).

body {
  display: flex;
}

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

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

.red {
  border: 1px solid red;
  display: block;
}
<div class="container">
  <svg id="blue" width="0" height="0"></svg>
  <svg class="red" width="100" height="100"></svg>
</div>
<div class="container">
  <svg class="red" width="100" height="100"></svg>
</div>

Upvotes: 2

Trash Can
Trash Can

Reputation: 6814

First of all, setting width and height effectively makes the element disappear visually, it is still however being accounted for in the flow of the page. The reason you are still seeing it is because you are giving it a border of 1px all around, hence the blue dot. If you remove the border rule, it will disappear, but like I said, it is still in the flow of the page, to completely take it out of the page flow, set display to none

Remove border rule for #blue => blue dot gone, but it is still being taken into the flow of the page

body {
  display: flex;
}

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

#blue {
  /*border: 1px solid blue;*/
}

#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>

Setting display to none => no longer takes up space

body {
  display: flex;
}

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

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

#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>

Upvotes: 1

Related Questions