CSS问题：如何消除列标题与内容区域间的多余空白？

一、完全去除空白 #

要彻底消除标题和内容之间的空白，从两方面处理：

• 先移除代码里冗余的空标签：删掉<p class="thumbnail_align">&nbsp; </p>，这个空标签会额外产生间距。
• 重置标题和段落的默认边距（浏览器自带的margin是空白的主要来源），添加以下CSS：

/* 去掉标题底部的默认边距 */
.secondaryWindowHeader1 {
  margin-bottom: 0;
}
/* 去掉内容段落顶部的默认边距 */
.secondaryWindowBody2 {
  margin-top: 0;
}
/* 若容器本身有内边距，也可一并清除 */
.columns {
  padding: 0;
}

二、将空白区域背景改为灰色 #

如果不想完全去掉空白，只需要统一背景色，给容器设置灰色背景即可，让标题和内容继承这个背景：

/* 设置容器背景为灰色，替换成你需要的具体色值 */
.columns {
  background-color: #f0f0f0;
}
/* 让标题和内容段落继承容器的背景色 */
.secondaryWindowHeader1, .secondaryWindowBody2 {
  background-color: inherit;
}

如果操作后仍有空白，检查是否有其他父元素设置了margin、padding或额外的空白样式，针对性调整即可。

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