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

Automatico.. 5

在#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;
}

body {
  display: flex;
}

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

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

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