如何用HTML和CSS垂直对齐两张图片以组成房屋形状

常见问题原因 #

你遇到的间隙和对齐问题，通常是这几个原因导致的：

• SVG文件本身带了多余的空白区域（viewBox设置范围超出图形实际尺寸）
• img标签默认是inline-block，基线对齐特性会产生底部小间隙
• Grid布局未明确子元素的对齐规则，导致元素间出现隐性间距

一步步解决 #

1. 清除SVG的多余空白 #

打开你的三角形和正方形SVG文件，检查viewBox属性，确保它刚好包裹图形内容，没有额外边距。比如三角形的viewBox应该匹配图形的实际左上角到右下角坐标，别留多余空间。

举个修正示例：

<!-- 原可能带空白的SVG -->
<svg width="200" height="100" viewBox="0 0 200 110" xmlns="http://www.w3.org/2000/svg">
  <polygon points="0 100, 100 0, 200 100" fill="#ddd"/>
</svg>

<!-- 修正后，viewBox刚好匹配图形尺寸 -->
<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="0 100, 100 0, 200 100" fill="#ddd"/>
</svg>

2. 重置img的默认样式 #

img默认的inline-block属性会带来基线对齐间隙，直接改成块级元素并清除内外边距：

.house img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

3. 优化Grid布局配置 #

给.house添加明确的对齐规则，强制子元素紧贴：

.house {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  padding: 0;
  margin: 0;
  align-items: start; /* 让元素顶部对齐，避免不必要的拉伸 */
  width: 200px; /* 设置容器宽度匹配你的SVG尺寸 */
}

4. （可选）调整SVG缩放规则 #

如果SVG缩放时仍有留白，给SVG添加preserveAspectRatio="xMidYMin meet"，确保图形填满容器：

<svg width="200" height="100" viewBox="0 0 200 100" preserveAspectRatio="xMidYMin meet" xmlns="http://www.w3.org/2000/svg">
  <polygon points="0 100, 100 0, 200 100" fill="#ddd"/>
</svg>

完整代码示例 #

<div class="house">
  <img src="triangle-roof.svg" alt="屋顶">
  <img src="square-house.svg" alt="房身">
</div>

.house {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  padding: 0;
  margin: 0;
  align-items: start;
  width: 200px;
}

.house img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

调整后，两张SVG就能紧密对齐，组成和Figma设计一致的房屋形状。

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