演示片段

Question

CSS class overlap将line-height属性设置为 0 。因此，当使用overlap类时，html标记的内容应该重叠。

下面的演示中有两个例子。第一个例子工作正常。使用的p代码包含overlap类，因此，使用<br>标记分隔的三行重叠，行之间的垂直空间为 0 。< / p>

在水平线下方的第二个示例中，div包含三个具有p类overlap的{{1}}个标记。

同样在第三个示例中，存储三个不同标记的separately具有div类，并且与第二个示例的行为完全相同。

显然问题是：为什么在第二个和第三个overlap上，div类因此 line-height 属性不起作用？我在哪里做错了，我该怎么做才能使这段代码正常工作，以便段落之间没有垂直行间距导致它们重叠？

演示片段

＆＃13;

overlap

＆＃13;

Answer 1

p元素从浏览器应用的默认样式表中获取默认边距（-top和-bottom） - 这些元素“跨越”div元素（意思是：给它一个高度）。 / p>

                p {
                  margin: 0; /* that’s all I have added */
                }
                p.normal {
                  font-style: normal;
                }
                p.italic {
                  font-style: italic;
                }
                p.oblique {
                  font-style: oblique;
                }
                .overlap {
                  line-height: 0;
                }

<hr>
<!-- #1 zero line-height used, paragraphs overlap -->
<div>
  <p class="overlap">
    This is a paragraph in normal style.
    <br>This is a paragraph in italic style.
    <br>This is a paragraph in oblique style.
    <br>
  </p>
</div>
<hr>
<!-- #2 even zero line-height used, paragraphs dont overlap -->
<div>
  <p class="normal  overlap">This is a paragraph in normal style.</p>
  <p class="italic  overlap">This is a paragraph in italic style.</p>
  <p class="oblique overlap">This is a paragraph in oblique style.</p>
</div>
<hr>
<!-- #3 even zero line-height used, paragraphs dont overlap -->
<div class="overlap">
  <p class="normal ">This is a paragraph in normal style.</p>
  <p class="italic ">This is a paragraph in italic style.</p>
  <p class="oblique">This is a paragraph in oblique style.</p>
</div>
<hr>

line-height属性不适用于单独的html元素

演示片段

1 个答案: