使用CSS实现框架布局时无法去除块元素间间距如何解决

你遇到的间隙是inline-block元素的默认特性：HTML中多个inline/inline-block元素之间的换行、空格会被浏览器解析为一个空白字符，自然就会产生间距，和padding、margin属性无关。

有三种常用解决方法：

方法1：删除HTML中元素之间的空白符 #

直接把三个.frame1的标签写在同一行，不要换行或加空格：

<body>
  <div class="frame1"></div><div class="frame1"></div><div class="frame1"></div>
  <div class="frame2"></div>
</body>

方法2：给父容器设置font-size: 0 #

空白间隙本质是文本字符，把父元素字号设为0即可消除，子元素内部如果需要展示文字再单独恢复字号即可：

/* 全局通配符重置，避免默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 统一宽度计算逻辑，width包含边框和内边距 */
}
body {
  font-size: 0;
}
.frame1 {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-size: 16px; /* 需要展示文字时加，字号按需求调整 */
}
.frame2 {
  display: block;
  width: 300px; /* 三个100px的frame1总宽度300px，刚好对齐，不需要额外加边框宽度 */
  height: 100px;
  border: 1px solid black;
  font-size: 16px;
}

方法3：改用Flex布局（更推荐，排版更灵活） #

不用inline-block，直接给父容器开启flex布局，自动消除空白间隙，还不需要额外处理字号问题：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-wrap: wrap; /* 超出宽度自动换行 */
}
.frame1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.frame2 {
  width: 300px;
  height: 100px;
  border: 1px solid black;
}

注意：你原来写的.frame2宽度312px和上层三个.frame1的总宽度不匹配，用box-sizing: border-box后三个.frame1总宽度为300px，把.frame2宽度改成300px就能完全对齐。

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