为什么宽度= 0和高度= 0的SVG占用布局空间？

Question

您能否解释以下示例中的第一个SVG为什么要占用布局空间，即使它具有width="0"和height="0"？

是否可以以不影响布局的方式设置样式？

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>

Answer 1

在#blue没有定义的display属性，所以它默认为inline，其中根据MDN说：“内联|的元件产生一个或多个内联元件盒”。

如果将显示设置为block，您将看到它不占用额外的空间：

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>

当然，如果要隐藏它，display: none则是一种方法。