为什么链接顶部和底部有空格？

Question

我有一个由锚标签包围的h3标签，但文本的顶部和底部有很多空白，我似乎无法下车。我将发布我的代码和它的外观图像。

HTML / PHP：

echo
'<div class="entertainment-loc-cont">
    <a href="' . $object['link'] . '"><h3 class="entertainment-title">' . $object['title'] . '</h3></a>
    <a href="' . $object['link'] . '"><img src="' . $object['img_link'] . '" /></a>
        <div class="entertainment-info">
            <p class="entertainment-line-1">' . $object['line_1'] . '</p>
            <p class="entertainment-line-2">' . $object['line_2'] . '</p>
            <p class="entertainment-line-3">' . $object['line_3'] . '</p>
            <p class="entertainment-line-4">' . $object['line_4'] . '</p>
            <p class="entertainment-line-5">' . $object['line_5'] . '</p>
        </div>
</div>';

CSS：

.entertainment-loc-cont {
    width: 100%;
}
.entertainment-loc-cont img {
    width: 100%;
}
.entertainment-loc-cont a {
    font-size: 2.5em;
    text-decoration: none;
}
.entertainment-title {
    color: #000000;
}

结果：

Answer 1

根据W3 specifications，<h3>代码的默认css值如下：

h3 {
    display: block;
    font-size: 1.17em;
    margin-before: 1em;
    margin-after: 1em;
    margin-start: 0;
    margin-end: 0;
    font-weight: bold;
}

如果您想更改它，请用css覆盖它，这是最简单的方法：

h3 { margin: 0; }

Answer 2

您看到的空格是浏览器默认样式<h3>的默认边距，也是由边距折叠造成的。

  

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。 8.3.1

要解决此问题，您可以设置h3 {margin-top:0; margin-bottom:0;}

虽然在HTML5中将<h3>封装到<a>标记中是有效的，但如果您希望它在旧浏览器中正常运行，建议您避免使用此标记。

我更喜欢这样做：<h3><a href="#">Text</a></h3>

如果您希望链接也占用整个宽度，请设置a {display:block;}。