p 和 div 标签内标题的差异结果

Question

我正在尝试为电子邮件地址创建一个段落。但我不能为它设计风格。

.mail a {
    margin: .7rem 0;
    padding: .3em .8em;
    border: 1px solid #ddd;
    transition: all .2s;
    color: #aaa;
}

    .mail a:hover {
        background-color: #ddd;
    }


    .mail a:hover {
        color: #333;
    }

<p class="mail"><h3><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3></p>
  <hr>
<div class="mail"><h3><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3></div>

JSBin 在这里。

我从来没有意识到 p 和 div 除了语义或 margin 或 line-height 等属性之外还有更多区别。

好的，我将使用 div 而不是 p 标签。但这是我心中的问题：

你怎么称呼这种差异，为什么会这样？
还有其他这种行为的例子吗？（我希望我不会错过任何类似的东西。）

Answer 1

这与两个标签的工作方式无关。

这与您在 p 中有一个 h3 这一事实有关。为什么？

It is impossible to put a heading element inside a p element in HTML markup, not just formally but because browsers implicitly terminate an open p element when they encounter a heading.

Source

带 p 标签但不带 h3 的工作样本：

.mail a {
    margin: .7rem 0;
    padding: .3em .8em;
    border: 1px solid #ddd;
    transition: all .2s;
    color: #aaa;
}

    .mail a:hover {
        background-color: #ddd;
    }


    .mail a:hover {
        color: #333;
    }

<p class="mail"><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></p>
  <hr>
<div class="mail"><h3><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3></div>

Answer 2

这是因为 h3 元素不能属于 p 元素。如果 p 元素的结束标记后跟某些元素，则可以省略它：

Tag omission

The start tag is mandatory. The end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.

(https://developer.mozilla.org/en/docs/Web/HTML/Element/p)

实际上，您的 p 标签在 h3 标签打开之前关闭，因此：

<p class="mail"><h3><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3></p>

实际变成这样：

<p class="mail"></p>
<h3><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3>

因此，您的 .mail a 规则不再适用于 a 标签，这导致它没有样式。

要修复，只需删除 p 标签并将 mail class 添加到 h3:

.mail a {
  margin: .7rem 0;
  padding: .3em .8em;
  border: 1px solid #ddd;
  transition: all .2s;
  color: #aaa;
}
.mail a:hover {
  background-color: #ddd;
}
.mail a:hover {
  color: #333;
}

<h3 class="mail"><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3>
<hr>
<div class="mail">
  <h3><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3>
</div>

还有一些其他标签的结束标签是可选的（如下所示），但是，关于何时自动关闭它们的规则不同：

</HTML>
</HEAD>
</BODY>
</P>
</DT>
</DD>
</LI>
</OPTION>
</THEAD>
</TH>
</TBODY>
</TR>
</TD>
</TFOOT>
</COLGROUP>

(HTML: Include, or exclude, optional closing tags?)

例如，如果打开一个新的 li，li 将自动关闭：

Tag omission

The end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element.

(https://developer.mozilla.org/en/docs/Web/HTML/Element/li)

虽然 tds 将在后面跟有 th 或 td 时自动关闭：

Tag omission

The start tag is mandatory. The end tag may be omitted, if it is immediately followed by a <th> or <td> element or if there are no more data in its parent element.

(https://developer.mozilla.org/en/docs/Web/HTML/Element/td)

可以在 W3C 网站上找到有用的元素列表以及它们是否需要关闭：http://www.w3.org/TR/REC-html40/index/elements.html

p 和 div 标签内标题的差异结果

Difference result for a heading within p and div tag

html

css

paragraph

heading