嘿，我看了你的问题和代码，咱们来快速搞定footer和上方内容之间的间距问题！你要的是两者完全紧密贴合，那大概率是浏览器默认样式或者代码里某些元素的margin/padding在搞鬼，咱们一步步来调整：

问题根源分析 #

浏览器会给section、p这类元素自带默认的margin/padding，很容易产生你看不到的间距；另外，.content里最后一段文字的默认底部margin、#section-6容器的默认底部margin，都是导致空隙的潜在原因。

具体调整方案 #

1. 先重置全局默认样式

给所有元素加上基础重置，彻底消除浏览器自带的默认间距：

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

2. 清除上方容器的底部间距

给承载内容的#section-6和.card加上底部margin清零：

#section-6 {
  margin-bottom: 0;
}
.card {
  width:100%;
  height:379.6px;
  margin-bottom: 0; /* 新增这行清除底部间距 */
}

3. 清除最后一段文字的底部margin

.content里最后一个p标签默认会有底部margin，也需要清零：

.content p:last-child {
  margin-bottom: 0;
}

修改后的完整CSS代码 #

/* 新增全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content{ 
  margin:0; 
  width: 100%; 
  font-family: 'Lato', sans-serif; 
} 

#footer{ 
  height:200px; 
  background:#1c1c1c; 
  text-align: center; 
  padding-top:69px; 
  padding-bottom: 69px; 
} 

.post_date{ 
  padding:20px 0; 
  border-top: 1px solid #dbdbdb; 
  border-bottom: 1px solid #dbdbdb; 
  width:100%; 
  color:#dbdbdb; 
} 

.card{ 
  width:100%; 
  height:379.6px; 
  margin-bottom: 0; /* 新增清除底部间距 */
} 

/*Card 6 properties*/ 
#c6{ 
  background: #9b59b6; 
} 

#c6 h3{ 
  color:white; 
} 

.b6,.s6{ 
  color:white; 
} 
/**********/ 

img{ 
  width:100%; 
  margin: 0px; 
}

/* 新增清除最后段落的底部margin */
.content p:last-child {
  margin-bottom: 0;
}

这样调整后，footer和上方的card就会完全紧密贴合啦。如果还有空隙，你可以检查一下main这类父容器是否带有默认margin，同样给它加上margin-bottom:0即可。

内容的提问来源于stack exchange，提问作者K.Woods