如何删除HTML标题/标题之间的行间距?

时间:2017-04-28 16:10:54

标签: html css

我有这段代码:

<h1> Something </h1>
<h3> Somethings </h3>
<h3> Some other things </h3>

我认为HTML会自动在它们之间添加1行间距。 我希望他们在没有1行间距的情况下,我的意思是逐行,而不是行空间行空间。

如果不使用在<br><h1>之间绝对不可行的<h3>元素,我怎么能这样做呢?可能不是结构良好的HTML练习可能太对了?

使用CSS底部边距修复此问题吗?

我很遗憾地问这么简单的问题,我对HTML&amp; CSS,但我还在学习。提前获取所有答案

4 个答案:

答案 0 :(得分:2)

默认样式,一致性的敌人

许多元素都有浏览器应用的默认边距。问题是每个浏览器(Chrome,IE等)都会应用不同的保证金。

这使浏览器之间难以实现一致性,并且我们需要有效的网页设计。

CSS重置为救援

研究“ CSS Resets ”的概念。使用这种方法,并且最好是这样的一些预建代码:https://github.com/murtaugh/HTML5-Reset将这些值重置为零,为您提供公平的竞争环境。

然后你可以决定你的标题会有多少余量。

您正在寻找的重置 - 仅针对此问题 - 是:

h1, h2, h3 {
 margin: 0px;
}

然后应用自己的样式

然后你会重新建立它,例如:

h1, h2, h3 {
 margin: 0px;
}

h1 {
 margin-bottom: 20px;
} 

h2, h3 {
 margin-bottom: 10px;
}
<h1> Something </h1>
<h3> Somethings </h3>
<h3> Some other things </h3>

通用重置

一个非常简单的“完全”CSS重置是:

* {
 margin:0;
 padding:0;
}  

但出于多种原因,尤其是表现,这是不可取的:(why) is the CSS star selector considered harmful?

答案 1 :(得分:1)

您看到的垂直间距是由标题元素的默认顶部和底部边距引起的。它与行间距无关(在CSS意义上)。要删除间距,请将相关边距设置为零。细节取决于标题序列之前和之后的上下文和对边距的预期效果(这里结构上有问题 - 第一级标题后面紧跟两个第三级标题;也许你的意思是第二个标题为h2 ?)。

对于给定的标记,假设不需要其他效果,并且为了简单起见,这些是唯一的h1h3元素,您可以设置

 h1 { margin-bottom: 0; }
 h3 { margin-top: 0; }
 h1 + h3 { margin-bottom: 0; }

答案 2 :(得分:0)

默认情况下标题有边距,所以是的,您应该使用CSS来删除边距。

答案 3 :(得分:0)

h1, h3 {
     margin:0;
}

这将有助于