HTML5 & CSS3 响应式网站设计边距问题

Question

请查看我的代码here。我正在尝试制作一个响应式网页，但第一篇文章栏的顶部和底部有奇怪的边距。我说的是顶部导航和内容列之间以及页脚和内容列之间的边距，我只是将 10 像素的边距设置为右列，如下所示。

.content {
width: 69%;
float: left;
margin:0;
padding:0 10px 0 0;

}

我是网页设计的新手，我不知道我在这里做错了什么。请帮助我

Answer 1

您正在体验页边距一起崩溃的方式。将 H2 标签上的 top-margin 设置为 0，并将最后一段上的 bottom-margin 设置为 0。然后要恢复白色 space，请将顶部和底部填充添加到article 元素。

有关边距崩溃的更多信息，请点击此处： https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Answer 2

正在使用

.topcontent{
   display: inline-block;
}

应该可以解决你的问题。