为什么底部填充和底部边距无助于在这些链接之间添加垂直间距？

我有一个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

为什么底部填充和底部边距无助于在这些链接之间添加垂直间距？

回答

相关问题