html - 在 div 之间添加链接时的 css 垂直空白

Question

我从未遇到过的问题。搜索没有解决，但可能不知道使用正确的搜索词。因此，如果已经回答，请原谅。

我有这个 html。 (有点长这么简单)

<div class="movieabovewrap">
<div class="movieabove">
    <a href="LINK">LINK TEXT</a>
</div>

而且我希望链接覆盖所有电影上方的 div，所以我将链接移到了它的外部，如......

<div class="movieabovewrap">
<a href="LINK">
    <div class="movieabove">
        LINK TEXT
    </div>
</a>

(它似乎切断了两者的最后一个结束 div) 无论如何，当我突然将链接移到 div 之外时，我在 div 上方和下方得到了大约 10px 的垂直空白，我认为它以某种方式附加到 href 元素。假设我在检查元素时无法显示任何内容。有没有办法用 css 删除这个垂直空格？它有点破坏我的设计。 :( 任何帮助将不胜感激。

Answer 1

简答:使用<span>而不是 <div>里面<a>应该为您解决问题。

---

解释:a标签呈现文本元素，如果您希望它的子元素也充当文本元素，它们必须具有 display: inline .

div元素有display: block默认情况下。

span元素有display: inline默认情况下。