Question

让我们考虑一下这个简单的代码：

HTML

 <h2>Some text</h2>

渲染时， h2 上/下边框与文本上/下边框之间的空白区域显示。有没有办法删除这个空格？

我已经能够实现为 line-height 属性提供固定值;然而，这个解决方案在我看来有点太“强迫”了。我怎样才能以更“自然”的方式实现同样的目标呢？

Answer 1

这个人会这样做。

<h2 style="margin:0">Some text<h2>

但是为了最佳做法，请始终将所有css代码放在外部css文件中或h head标记中样式标记内的html文件中。

外部css文件中的

h2{
    margin:0;
}

或在您的html文件中

将代码放在head代码

中

<style>
    h2{
          margin:0;
    }
</style>

请阅读：http://www.w3schools.com/css/css_howto.asp

Answer 2

您可以通过使用css从H2元素中删除边距来实现此目的。

＆＃13;

h2 {
  margin: 0;
}

＆＃13;

 <h2>Some text</h2>

＆＃13;

如果您只想从<h2>元素的顶部或底部删除空格，则可以使用margin-top和margin-bottom CSS属性。

Answer 3

您可以将margin和padding设置为0。我将h2放入div，以便更容易看到差异。

h2.remove-whitespace {
  margin: 0;
  padding: 0;
  line-height: 30px;
  height: 25px;
}

div {
  padding: 0;
  margin-bottom: 5px;
  border: 1px solid black;
}

<!-- with margin:0;padding:0 -->
<div>
    <h2 class="remove-whitespace">Some text</h2>
</div>

<!-- original -->
<div>
    <h2>Some text</h2>
</div>

Answer 4

html的标题元素（例如h1 .... hx）具有预定的填充和边距。要进行测试，可以使用css为标题元素添加边框，但这不是这里的情况。所以只需将填充设置为 0 ，它就能正常工作，但请记住它不会改变字体大小。

Answer 5

This comes under the default styles when the page is rendered. you will face this issue with all the HTML tags.

Please use reset.css的文本以克服所有标签默认样式问题。

享受造型!! ：d

删除<h2>边框和内容之间的空白区域

5 个答案: