如何消除div与SVG元素之间的空白区域？

问题核心原因 #

从代码和描述来看，空白主要来自两点：

• SVG默认是inline-block元素，会和文本基线对齐，产生底部空白
• SVG的height设为50px，但内部<rect>的height是70px，尺寸不匹配导致布局偏移

具体修复步骤 #

1. 将SVG设为块级元素，消除inline元素的基线空白：给SVG添加display: block;样式，同时移除无效的margin/paddingHTML属性（SVG不支持这类属性，需用CSS控制）
2. 统一SVG与内部矩形的高度：把SVG的height改为70px，和内部<rect>高度保持一致，避免元素溢出导致的布局错位
3. 确保侧边div无额外间距：给.sidebar明确设置margin-top: 0;，排除默认样式干扰

修改后的代码 #

SVG HTML：

<svg width="100%" height="70px" style="display: block; margin: 0; padding: 0;">
  <rect class="topbar" width="100%" height="70" style="fill:rgb(86,87,86);" z-index="2"/>
</svg>

SVG CSS：

.topbar {
  position: relative;
  left: 0;
  top: auto;
  z-index: 10;
  overflow: hidden;
} 

div HTML：

<div class="sidebar"></div>

div CSS：

.sidebar {
  overflow: hidden;
  background-image: url('square.png');
  width: 100px;
  height: 10000000px;
  position: relative;
  z-index: 1;
  left: 0;
  bottom: 0;
  margin-top: 0;
}

额外排查点 #

如果仍有空白，可添加全局重置样式统一消除浏览器默认间距：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者MrHDumpty