内联阻止不适用于一个元素

Question

I have four links on my web page's footer. I've set hover style with white background color to the text links and also "display: inline-block;". When I hover on those links, they looks like this:

Inline-block doesn't always work on the Facebook link, that means that it depends on the screen size. And I can't figure out why it behaves like this. I'm using Bootstrap for my work.

This is the HTML for those 2 links:

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

And this is the 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;  
}

I've tried to inspect it and I see that the Facebook p tag has a wider padding or container (I don't know how to call this) than the p tag that belongs to address part. I know I'm not supposed to post my project's link here, but if there's someone who could help me, I'd be very happy. Thank you in advance.

Answer 1

您是否尝试过为嵌入式块设置宽度和高度？