我有这段代码:
<h1> Something </h1>
<h3> Somethings </h3>
<h3> Some other things </h3>
我认为HTML会自动在它们之间添加1行间距。 我希望他们在没有1行间距的情况下,我的意思是逐行,而不是行空间行空间。
如果不使用在<br>
和<h1>
之间绝对不可行的<h3>
元素,我怎么能这样做呢?可能不是结构良好的HTML练习可能太对了?
使用CSS底部边距修复此问题吗?
我很遗憾地问这么简单的问题,我对HTML&amp; CSS,但我还在学习。提前获取所有答案
答案 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
?)。
对于给定的标记,假设不需要其他效果,并且为了简单起见,这些是唯一的h1
和h3
元素,您可以设置
h1 { margin-bottom: 0; }
h3 { margin-top: 0; }
h1 + h3 { margin-bottom: 0; }
答案 2 :(得分:0)
默认情况下标题有边距,所以是的,您应该使用CSS来删除边距。
答案 3 :(得分:0)
h1, h3 {
margin:0;
}
这将有助于