HTML5+CSS开发校园网站table布局相册右侧出现无法消除margin问题求助

核心诱因 #

table元素自带的浏览器默认样式、自动布局规则，以及内部图片的默认行内属性，是导致右侧出现视觉外边距的核心原因，可按以下步骤依次排查修复：

• 重置table默认属性
  给相册模块的table添加如下样式，清除浏览器默认边距、固定布局避免宽度自动计算留白：

.album-table {
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
.album-table td {
  margin: 0;
  padding: 0;
}

• 清除内部图片默认间距
  相册单元格内的img标签默认是行内元素，自带底部留白，可能撑大单元格导致表格宽度计算异常，添加如下样式修复：

.album-table img {
  display: block;
  width: 100%;
  height: auto;
}

• 统一盒模型规则
  避免边框、内边距撑大元素宽度导致的视觉留白：

.album-table, .album-table * {
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Michiel Van Den Bempt