h6元素占用了更多的空间

Question

我只有一个简单的h6标签，它无缘无故地占用了很多空间。这是我的代码：

HTML：

<div class="logintitle">
  <h6>LOGIN</h6>
</div>

首次尝试使用CSS

.logintitle {
top: 0;
bottom: 0;
border: 1px solid black; /* showing unwanted margin top and bottom */
}

以下内容为我提供了以下结果：

Answer 1

默认情况下，所有标题标签（例如<h6>）的顶部和底部都有一定的边距。此外，如果您的项目中还有其他样式，则可能会添加更多样式。

如果您不希望使用这些页边距，则可以这样做，这很可能会解决您的问题：

.logintitle h6 { margin: 0; }

Answer 2

我认为您的班级名称有误，您必须在班级名称上添加“ h6”。

尝试：

.logintitle h6{
   margin:0;
   padding:0;
   line-height:16px;
   font-size:14px;
}

Answer 3

作为补充说明，如果您想在网站的所有元素上重置边距和填充，则可以使用以下CSS重置：

* {
    margin: 0;
    padding: 0;
}

值得一提的是box-sizing CSS属性，它在以下重置操作中将所有元素的大小设置为包括边框和填充：

* {
    box-sizing: border-box;
}