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

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

标记省略

开始标记是必需的。如果<p>元素后面紧跟<address>，<article>，<aside>，<blockquote>，<div>，{{}，则可以省略结束标记{1}}，<dl>，<fieldset>，<footer>，<form>，<h1>，<h2>，<h3>，{{1 }}，<h4>，<h5>，<h6>，<header>，<hr>，<menu>，<nav>，<ol> ，<pre>，<section>或其他<table>元素，或者如果父元素中没有其他内容且父元素不是<ul>元素。

（https://developer.mozilla.org/en/docs/Web/HTML/Element/p）

有效地，您的<p>代码在<a>代码打开之前就已关闭，所以：

实际上变成了这个：

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：

＆＃13;

mail

＆＃13;

h3

＆＃13;

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

.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;
}

（HTML: Include, or exclude, optional closing tags?）

例如，如果新的<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>将自动关闭：

标记省略

如果列表项后面紧跟另一个li元素，或者其父元素中没有其他内容，则可以省略结束标记。

（https://developer.mozilla.org/en/docs/Web/HTML/Element/li）

如果后跟li或<li> td，th会自动关闭。{/ p>

标记省略

开始标记是必需的。如果是，则可以省略结束标记   紧接着是td或<th>元素，或者如果没有更多元素   其父元素中的数据。

（https://developer.mozilla.org/en/docs/Web/HTML/Element/td）

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

Answer 2

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

这与您在h3内有p的事实有关。为什么？

将标题元素放在HTML中的p元素中是不可能的标记，不仅仅是正式的，而是因为浏览器隐式终止了当他们遇到标题时打开p元素。

Source

使用p标记而不使用h3的工作示例：

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

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

2 个答案: