html - 为什么链接与文本重叠？

Question

这是 HTML:

<div>
    <p>
        We bring you the latest in entertainment & information services, right on your phone. From the latest of Bollywood to the futuristic applications, get it all here!
        <a href="#">View All</a>
    </p>
</div>

这是CSS....

div{width: 350px;}
a{
    padding: 30px;
    background: red;
    margin: 20px;
    border-radius: 12px;
    background: red;
    color: #fff;
    font: bold 12px Arial, Helvetica, sans-serif;
    text-decoration: none;
}

我知道这可以通过使用 display: inline-block; 来解决在 .a .但我想知道为什么这与文字重叠？不应该超越文本吗？

DEMO1

DEMO2 现在a在 p 的 block 级别内。

也看看这个 DEMO 。 Img 也是一个行内元素。为什么这不重叠，这也应该重叠，对吧？

Answer 1

<a> tag是内联级别但是 <img> tag是内联和 block 级特别是内联 block 。所以<a> tag由于与文本相对应的内联级别而重叠，但 <img> tag不会重叠，因为它表现的是内联 block 。您可能知道它们之间的区别。

引用: Is <img> element block level or inline level?

内联元素无法设置其宽度和高度，甚至不能正常工作实际应该做的边距行为。边距仅应用于左侧或右侧。其实这就是为什么，这里的内联元素<a> tag不会设置其宽度和高度并保持在同一行，并且在应用填充值时似乎重叠。

下图让你清楚了解inline vs inline-block

View Live Demo