2

这是 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;in来解决.a。但我想知道为什么这与文本重叠？它不应该超出文本吗？

演示1

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

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

4

6 回答 6

3

<a> tag是内联级别，但同时<img> tag是内联和块级别，特别是内联块。<a> tag由于内联级别与文本相对应，因此重叠，但<img> tag不会重叠，因为它的行为是内联块。您可能知道它们之间的区别。

参考： <img> 元素是块级还是内联级？

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

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

内联块与内联

查看现场演示

于 2013-04-25T05:20:33.900 回答
2

它是重叠的，因为<a>标签的默认行为是适合文本。如果你想让它表现得像一个块，那么设置display: block.

于 2013-04-25T04:20:39.977 回答
0

填充不适用于内联元素。

参考：内联元素和填充

于 2013-04-25T04:28:52.590 回答
0

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

于 2013-04-25T04:22:08.727 回答
0

在a中添加以下属性。

  position:relative;
  float:left;

工作演示

提示：

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

    演示

于 2013-04-25T04:25:53.187 回答
0

这实际上在W3C 规范中进行了解释，尽管查找起来有点棘手。

这些框之间会考虑水平边距、边框和填充。

这默认意味着不尊重垂直边距/边框/填充。它接着说：

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

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

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

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

于 2013-04-25T04:34:48.927 回答