爲什麼頂部和底部邊距不適用？爲什麼需要保證金適用？

HTML：

<p>Paragraph Text</p> 
    <p> 
     <a class="cta" href="#">Visit Blog</a> 
    </p> 
<p>Paragraph Text</p>

的CSS：

a.cta { 
    font-size:18px; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    margin-left: 40px; 
}

1）爲什麼頂部&底部的邊距不適用致主播的「cta」 Class ?.
和
2）爲什麼左邊距適用沒有任何問題？

您需要添加display: inline-block;你的CSS

CSS

a.cta {  
    font-size:18px;  
    margin-top: 50px;  
    margin-bottom: 50px;  
    margin-left: 40px; 
    display: inline-block; 
}

說明：由於<a>是inline元素，內聯元素不需要頂部，底部邊距，您需要使其阻止l伊維爾基尼元件，通過聲明inline-block或block

內聯和塊級元素

2012-10-28 05:52:15

你_can_獲得與舊版本的IE'直列block'一些奇怪的行爲，但它是非常安全的錨標記使用。好決定。 – mattc

+1有用的信息和證明鏈接 –

@HTMLDeveloper很高興知道這對你有所幫助:) –

您必須給予a.cta的父元素寬度和高度以使邊距生效。保證金對您的瀏覽器來說並沒有多大意義，沒有一個參考點就可以使用。

p {寬度：100像素，高度：100像素;}

2012-10-28 05:52:15

GRT不錯的主意... –

的a元件默認是「內聯」元素的List。這意味着它與其周圍的文本顯示在同一行。根據定義，內聯元素不具有頂部或底部邊距，只有左側和右側。要添加頂部或底部邊緣，只需通過修改你的CSS聲明元素爲「塊」類型的元素，如下圖所示：

a.cta { 
    display: block; 
    font-size:18px; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    margin-left: 40px; 
}

但是，你需要知道，從一個內聯元素將其更改爲一個塊元素確實有一些後果。例如，a標籤中的文本將顯示在其之前的文本下面的其自己的部分中。其後的任何文本將在其下面的單獨部分中顯示，就好像它們都是單獨段落的一部分。

2012-10-28 05:57:40 mattc

但是使用'inline-block'不會讓段落中斷:) –

gr8解釋，謝謝。 – user1528138

另一種選擇是將該類應用於<p>元素而不是<a>。我不知道這是否適用於你想要做的事情，但它確實爲你提供了無需指定寬度的邊緣。

HTML：

<p>Paragraph Text</p> 
<p class="cta"> 
    <a href="#">Visit Blog</a> 
</p> 
<p>Paragraph Text</p>

CSS：

p.cta { 
font-size:18px; 
margin-top: 50px; 
margin-bottom: 50px; 
margin-left: 40px; 
}

而且JsFiddle。

-Marcatectura

2012-10-28 06:02:43 Marcatectura

回答