我不是 CSS 专家,所以请原谅这可能是一个基本问题。我有一个恼人的问题,我似乎无法解决:
我想将文本移近标题标签,所以我这样做了:
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
结果
结果很完美,正是我想要的,但是......当我调整浏览器大小时,问题就来了。
我的问题
为什么文本在浏览器调整大小时会压缩?我究竟做错了什么?我不应该使用 line-height
属性吗?有什么解决方法吗?
最佳答案
line-height
属性用于控制为每行分配多少垂直空间。通常,它用于调整元素内行与行之间的间距。
line-height: 1
表示行的大小足以容纳最高的字母和最低的下行字母,中间没有空格。 line-height
大于 1 意味着行之间有一些额外的空间,小于 1 将导致行重叠。
line-height: 0
表示一行文本没有分配垂直空间,因此所有行将在一行中相互重叠。这就是您在这里看到的:文本换行到第二行,第二行呈现在第一行的顶部。
您要做的是调整元素之间的间距,而不是单个元素中行之间的间距。为此,推荐的方法是调整 margin
或 padding
。考虑调整元素的边距,直到获得所需的垂直节奏。
有关所有三个属性如何工作的真正详细说明,请参阅 CSS Tricks article on the box model .
例子
body { font-family: sans-serif; }
.cramped h2 {
margin: 0.4em 0 0.2em;
}
.cramped p {
font-style: italic;
margin: 0;
}
<section class="cramped">
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscin.</p>
</section>
关于html - 调整浏览器文本大小的 CSS 行高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31986618/