DIV之间的额外余量

Question

在this website上，while和{}之间存在差距。 #container_head：

你能看出造成这种差距的原因吗？我不能。我尝试创建一个jsfiddle，但我想向你展示现场网站会更快。

Answer 1

.site-header类中的标题部分有一个margin-bottom。删除它，它工作正常

Answer 2

在#container_head内header#masthead，margin-bottom: 4.236em。

它已应用于CSS规则：

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header {}

Answer 3

标题的下边距设置在此处：

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header {
  margin-bottom: 4.236em;
}

通过设置以下css（注释如下）来修复它：

.home.page:not(.page-template-template-homepage) .site-header {
  margin-bottom: 0;
}

如果您首先将margin-bottom设置为整个声明，我会非常小心。使用我提供的第二种方式。否则，它可能会在您网站的其他页面中产生不良影响。

Answer 4

在您的风格中，存在边缘问题，因为修复它

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header{
 margin:0px !Important;
}

Answer 5

填充来自头部内部div，id = masthead。有关详细信息，请参阅屏幕抓取。

删除后，您的问题将得到解决。