删除标题元素周围的额外空间

Question

我正在尝试删除<h2>元素

周围的所有空格

我有这个简单的标记：

<div>
    <h2>Count down</h2>
</div>

我尝试删除间距：

h2 {
  margin: 0;
  padding: 0;
  line-height: 0;
}

但仍有一些空白区域。你可以在这个屏幕截图中看到它：

上下都有间距（并且它不是填充或边距）。我怎样才能摆脱那个额外的间距？

编辑：这是一个简单的jsfiddle来说明。我想删除浅蓝色的空间。

Answer 1

屏幕截图中的检查员显示

.countdown h2 {
  margin: 0 0 10px;
}

等同于：

.countdown h2 {
  margin-bottom: 10px;
}

这意味着您必须在css的某个地方设置样式h2。

因为样式嵌套为.countdown h2，所以它只需要仅仅样式h2。

如果您无法删除它，并且不想使用!important覆盖它，您可以覆盖以下样式：

body .countdown h2 {
    margin: 0;
}

这为它提供了三个元素，使其比检查器中的两个元素更具体。请参阅此处的示例：JS Fiddle

有关CSS优先级的更多信息： W3 - The cascade

Answer 2

你的倒计时课程padding围绕你的40px h2，因为你将它设为全局，它会在40px左上角和右上角填充以修复尝试此< / p>

.countdown { padding:0px 40px 0px 40px; }

如果你的意思是h2在底部有空间，因为你有一个样式，在底部放置10px的边距以删除只删除那个样式。

.countdown h2 { margin: 0 0 10px; }

如果您不想删除它，可以通过

覆盖它

 h2 {
     margin: 0px !Important;
     padding: 0px;
     line-height: 0;
   }

除非确实需要，否则你不应该真正使用!important，在这种情况下它不是。