爲什麼鏈接重疊文本？

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

我知道這可以通過在.a使用display: inline-block;來解決。但我想知道爲什麼這是重疊的文字？它不應該超越文本嗎？

DEMO1

DEMO2現在a是p的塊水平內。

還可以看看這個DEMO。 Img也是一個內聯元素。爲什麼這不重疊，這應該也是重疊的，對嗎？

來源

2013-04-25 luxi

嘗試浮動：左;或位置：絕對; – 2013-04-25 05:03:23

<a> tag是內聯級別，但<img> tag是內聯和塊級別特別內聯塊。所以<a> tag是重疊的，因爲內嵌級別對應於文本，但<img> tag不會重疊，因爲它行爲內嵌塊。你可能知道它們之間的區別。

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

一個內聯元素不能設置它的寬度和高度，甚至不能正常工作的保證金行爲實際上應該做的事情。保證金僅適用於左側或右側。其實這就是爲什麼，這裏的內聯元素<a> tag不會設置它的寬度和高度，並保持在同一行，並且在應用填充值時似乎重疊。

下面的圖片讓你清楚瞭解有關內聯VS inline-block的

inline-block vs inline

View Live Demo

來源

2013-04-25 05:20:33

這是重疊的，因爲<a>標籤的默認行爲適合文本。如果您希望它的行爲類似於塊，請設置display: block。

來源

2013-04-25 04:20:39

鏈接上display屬性的初始值爲display: inline。這意味着它會嘗試符合文本，並會接受水平頁邊空白和填充，這正是您的鏈接與文本重疊的原因。爲了讓它接受垂直邊距（因此它不重疊），如果您希望它與文本仍然對齊，則需要將其設置爲display:block或inline-block。

來源

2013-04-25 04:22:08 Artless

添加以下屬性在a。

position:relative; 
    float:left;

Working DEMO

TIPS：

寫background-color代替簡寫background當你沒有任何關聯的其他財產。

如果你寫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

來源

2013-04-25 04:25:53 diEcho

填充不能很好地與內聯元素的工作。

編號：Inline Elements and Padding

來源

2013-04-25 04:28:52

這實際上是在W3C spec解釋說，雖然這是一個有點棘手找到。

這些方框之間的水平邊距，邊框和填充符合要求。

默認意味着垂直邊界/邊界/填充是而不是尊重。它接着說：

行框的高度是由一節中包含的行高的計算規則確定

如果移動<a>成箱的內容

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

你可以看到這種效果：http://jsfiddle.net/rHCNb/7/ - 水平填充是尊重，但不是垂直。其涵蓋其他文本的事實與z-indexing有關。

來源

2013-04-25 04:34:48

爲什麼鏈接重疊文本？

回答

相關問題