爲什麼底部填充和底部邊距無助於在這些鏈接之間添加垂直間距？

我有一個div的鏈接。我用<br>標籤將它們排列在一起，因爲我無法弄清楚如何在CSS中添加垂直間距。我嘗試在樣式規則中添加底部邊距和底部填充，但似乎沒有任何效果（爲什麼？）。我可以添加另一個<br>標記來將它們分開，但我必須假設有一種更好的方法來處理CSS，這是我無法想象的。爲什麼底部填充和底部邊距無助於在這些鏈接之間添加垂直間距？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
html, body 
{ 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    font-weight:normal; 
    font-size:12pt; 
    font-family: Verdana, Arial, Helvetica, serif, sans-serif; 
    background:lime; 
} 

#linksouter 
{ 
    margin: 0; 
    padding: 0; 
    border-style:solid; 
    border-width:0px; 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    width: 80px; 
    background: blue; 
    text-align:left; 
} 
#linksinner 
{ 
    margin: 80px 0 0 .5em; 
    width:100%; 
    background:fuchsia; 
    display:inline; 
    height:100%; 
} 
#linksinner a 
{ 
    color:red; 
    text-decoration: none; 
    background:yellow; 
} 
</style> 
</head> 

<body> 
<div id="linksouter"> 
    <div id="linksinner"> 
    <a href="#">1</a><br /> 
    <a href="#">1</a><br /> 
    <a href="#">1</a><br /> 
    <a href="#">1</a><br /> 
    <a href="#">1</a><br /> 
    </div> 
</div> 

</body> 
</html>

來源

2009-07-16 gday

垂直邊距和填充僅適用於塊級元素，如div和p。 a是一個內聯元素，所以它不會工作。

爲了做到你想要什麼，你需要下面的樣式添加到您的鏈接：

display:block;

只有這樣，保證金和尋呼頂部和底部得到正確應用

編輯：如果你這樣做，你也可以擺脫<br/>標籤

來源

2009-07-16 00:18:01

我只是想說...... – jeroen 2009-07-16 00:19:52

然後我們同意:) – 2009-07-16 00:20:26

要添加垂直間距，你可以這樣做：

#linksinner 
{ 
    line-height: 150%; 
}

保證金將不會對<a>元素的任何影響，因爲他們是內聯。另一種解決方案是讓他們：

display: block;

這意味着他們尊重你的空間，然後您就不需要你的<br>秒。

來源

2009-07-16 00:17:18 RichieHindle

鏈接不能定義邊距，因爲默認情況下它們是「內聯」元素。內聯元素不能應用邊距或寬度規則。要允許內聯元素應用這些內容，您需要在規則中添加其他屬性。

試試這個：

#linksinner a { 
    display: inline-block; 
    /* Add your margin or height rules here */ 
}

我認爲你正在尋找做什麼，你應該使用雖然名單：

<ul id="linksinner"> 
    <li><a href="#">1</a></li> 
    <li><a href="#">1</a></li> 
    <li><a href="#">1</a></li> 
    <li><a href="#">1</a></li> 
    <li><a href="#">1</a></li> 
<ul>

您可以再申請保證金或填充規則<li />標籤。如果你不想要項目符號顯示使用：

#linksinner li { list-style-type: none}

來源

2009-07-16 00:20:23

-1

你需要給anchor-tags，而不是div的填充或邊距。但實際上不這樣做，請改爲：

<p><a href="#"></a></p>

並給出p的填充底部或填充頂部。

來源

2009-07-16 00:21:21 stefanw

爲什麼底部填充和底部邊距無助於在這些鏈接之間添加垂直間距？

回答

相關問題