html - 行高属性不适用于单独的 html 元素

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

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

在水平线下方的第二个示例中， div 包含三个不同的 p 标签，它们具有 overlap 类 separately 。

同样在第三个示例中，存储三个不同标签的 div 具有 overlap 类，其行为与第二个示例完全相同。

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

演示片段

    <DOCTYPE html>
    <html>
        <head>
            <style>
                p.normal {
                    font-style: normal;
                }

                p.italic {
                    font-style: italic;
                }

                p.oblique {
                    font-style: oblique;
                }

                .overlap {
                    line-height: 0;
                }
            </style>
        </head>
        <body>
            <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>
        </body>
    </html>

最佳答案

p 元素从浏览器应用的默认样式表中获得默认外边距(-top 和 -bottom)——那些“跨越”div 元素(意思是:给它一个高度)。

                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>

关于html - 行高属性不适用于单独的 html 元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35024439/