如何移除CSS容器边框与内部内容之间的多余空白间距

修复方案 #

造成不同浏览器渲染差异的核心原因是默认样式未做统一、行内元素基线间距、绝对定位属性缺失三类问题，按以下步骤修改即可：

1. 全局统一盒模型与默认边距，消除浏览器原生样式差异

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

2. 消除图片默认的底部基线空白，这是Chrome下出现多余空白的最常见诱因

/* 所有放在.channel容器内的图片统一设为块级元素 */
.channel img {
  display: block;
  width: 100%;
}

3. 完善底部绝对定位区块的属性，补全缺失的定位规则

.details section:last-child {
  position: absolute;
  flex-direction: row;
  display: flex;
  left: 0; /* 补全左侧定位规则，避免浏览器默认偏移 */
  width: 100%;
  bottom: 0;
  margin: 0;
  padding: 0;
  align-items: center; /* 按需设置flex对齐规则，避免内容错位 */
}

4. 调整外层容器样式，避免默认内边距与内容溢出

.channel {
  border: 1px solid rgba(130, 130, 130, 0.8);
  margin-bottom: 20px;
  position: relative;
  border-radius: 4px;
  margin-left: 20px;
  height: 266px;
  width: 260px;
  padding: 0; /* 清除默认内边距 */
  overflow: hidden; /* 裁剪超出容器的内容，避免圆角失效同时消除溢出空白 */
}

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