Question

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

我有这个html。（Kinda这么简单）

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

而且我希望该链接覆盖所有高于movie的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。

Answer 2

内联或通过CSS将display: block添加到链接：

<div class="movieabovewrap">
  <a href="LINK" style="display: inline-block;">
      <div class="movieabove">
          LINK TEXT
      </div>
  </a>
</div

或

.movieabovewrap > a {
  display: inline-block;
}

在div之间添加链接时的CSS垂直空白

2 个答案: