Question

我不是css的大师所以请原谅可能是一个基本问题。我有一个似乎无法修复的烦人问题：

这是我没有css line-height的文本：

我想将文本移到标题标签附近，所以我这样做了：

lastname:Vader

结果

结果非常完美，正是我想要的，但......当我调整浏览器大小时，问题就出现了。

问题调整浏览器大小

我的问题

为什么浏览器上的文字会缩小？我究竟做错了什么？我不应该使用<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>财产吗？对此有何解决方法？

感谢您阅读

Answer 1

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>

Answer 2

     <h2>Loren Ipsum Dol Tjovanuu</h2>
    <p style="line-height:23px;">
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
     </p>
    <h2>Neque porro quisquam est qui dolorem ipsum</h2>
    <p style="line-height:23px;">
    <i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
    </p>

试试这个在我的浏览器上工作正常

Answer 3

将此添加到您的CSS：

h2 {
    margin-bottom: -10px;
}

h2标签默认有边距

Here is the JSFiddle demo

Answer 4

试试这个

p{margin-top:-10px; font-style:italic;}

@media screen and (max-width:768px){
    h2{font-size:18px;}
        p{font-size:14px}
}

Answer 5

线高用法用于设置每条线的距离（高度）。 0值没有距离所以你有这个问题。

您应该将行高设置为默认值，并重置默认h2和p元素边距。

行高

在块级元素上，line-height属性指定   元素内线框的最小高度。

在未替换的内联元素上，line-height指定高度   用于计算线框高度。在替换内联元素这样的   作为按钮或其他输入元素，行高无效。 [1]

＆＃13;

h2, p {
  margin: 0;
}

＆＃13;

<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>
  <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>
  <i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>

＆＃13;

参考：MDN - line-height - w3.org - line-height

css行高调整浏览器文本大小

5 个答案:

实施例