为什么链接与文本重叠？

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的块级别内。

还可以查看 DEMO 。 Img也是一个内联元素。为什么这不重叠，这也应该重叠，对吗？

Answer 1

<a> tag是内联级别，但<img> tag是内联和块级别的内联块。因此<a> tag重叠是因为内联级别与文本相对应，但<img> tag不会重叠，因为它表现为内联块。你可能知道它们之间的区别。

参考： Is <img> element block level or inline level?

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

以下图片让您清楚地了解内联vs内联块

<强> View Live Demo

Answer 2

它是重叠的，因为<a>标记的默认行为是适合文本。如果您希望它的行为类似于块，请设置display: block。

Answer 3

链接上display属性的初始值为display: inline。这意味着它将尝试适应文本并接受水平边距，并在所有边上填充，这正是您的链接与文本重叠的原因。为了使其接受垂直边距（因此它不重叠），如果您希望它与文本对齐，则需要将其设置为display:block或inline-block。

Answer 4

在 a 。

中添加以下属性

  position:relative;
  float:left;

Working DEMO

<强> TIPS：

1. 当您执行时，请写background-color而不是速记background 没有关联任何其他财产。

2. 如果您编写display:block，则块宽度将等于父级 宽度，所以总是用width写display。

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

   DEMO

Answer 5

填充对内联元素不起作用。

价：Inline Elements and Padding

Answer 6

这实际上是在W3C spec中解释的，虽然找到它有点棘手。

  

在这些框之间遵循水平边距，边框和填充。

这默认暗示垂直边距/边框/填充不受到尊重。它继续说：

  

线框的高度由线高计算部分中给出的规则确定

如果您将<a>移动到框中的内容

We bring you the latest in entertainment <a href="#">View All</a>

您可以看到此效果：http://jsfiddle.net/rHCNb/7/ - 水平填充受到尊重，但不是垂直填充。它涵盖其他文本的事实与z-indexing有关。