html - 行内 block 不适用于一个元素

Question

我的网页页脚上有四个链接。我已经为文本链接和“display: inline-block;”设置了白色背景的悬停样式。当我将鼠标悬停在这些链接上时，它们看起来像这样:

Inline-block 并不总是适用于 Facebook 链接，这意味着它取决于屏幕尺寸。而且我不明白为什么它会这样。我在工作中使用 Bootstrap。

这是这两个链接的 HTML:

<div class="col-sm-3" id="addr"> <a href="https://goo.gl/maps/ny3wV" title="Asukoht" target="_blank"><img src="images/location.png" alt="asukoht" title="Asukoht"/></a> <a href="https://goo.gl/maps/ny3wV" title="Asukoht" target="_blank">
          <p>Jansuki Shop<br />
            Müürivahe 17<br />
            Tallinn </p>
          </a> </div>
        <div class="col-sm-3" id="fb"> <a href="https://www.facebook.com/8Delfiini" title="Facebook" target="_blank"><img src="images/fb.png" alt="Facebook" title="Facebook"/></a> <a href="https://www.facebook.com/8Delfiini" title="Facebook" target="_blank">
          <p>8 Delfiini Facebookis</p>
          </a> </div>

这是 CSS:

#addr p, #fb p
{
    margin: 0;
    padding: 0;
    display: inline-block;
}

#addr p:hover, #fb p:hover
{
    background-color: rgb(255,255,255);
    color: rgb(157,52,46);
    text-decoration: none;  
}

我尝试检查它，发现 Facebook p 标签的填充或容器(我不知道如何调用它)比属于地址部分的 p 标签更宽。我知道我不应该在这里发布我的元素链接，但如果有人可以帮助我，我会很高兴。提前谢谢你。

Answer 1

您是否尝试过为行内 block 设置宽度和高度？