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

发布于 2024-07-27 13:40:07 字数 1556 浏览 10 评论 0原文

我有一个 div，里面有链接。我用标签将它们排列在一起，因为我不知道如何使用 CSS 添加垂直间距。我尝试向样式规则添加底部边距和底部填充，但它似乎没有任何效果（为什么？）。我可以添加另一个标签来进一步分隔它们，但我必须假设有一种更好的方法可以使用我无法弄清楚的 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>

原文

I have a div with links in it. And I'm lining them up one over the other with <br> tags because I couldn't figure out how to add vertical spacingn with CSS. I tried adding a bottom margin and a bottom padding to the a style rule but it didn't seem to have any effect (why?). I could add another <br> tag to separate them more but I have to assume there's a nicer way to do this with CSS that I just haven't been able to figure out.

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紫轩蝶泪 2024-08-03 13:40:07

垂直边距和填充仅适用于块级元素，例如 div 和 p。 a 是一个内联元素，因此它不起作用。

为了执行您想要的操作，您需要在链接中添加以下样式：

display:block;

只有这样，顶部和底部的边距和分页才能正确应用

编辑：如果您这样做，您还可以获得去掉标签

Vertical margin and padding only works on block level elements like div and p. a is an inline element so it wont work.

In order to do what you want you need to add the following style to your links:

display:block;

only then will margin and paging for top and bottom get applied correctly

EDIT: if you do it this way you can also get rid of the <br/> tags

回复收藏 0 原文

初熏 2024-08-03 13:40:07

要添加垂直间距，您可以执行以下操作：

#linksinner
{
    line-height: 150%;
}

边距不会对元素产生任何影响，因为它们是内联的。另一种解决方案是制造它们：

display: block;

这意味着他们尊重您的利润，然后您就不需要您的。

To add vertical spacing, you can do this:

#linksinner
{
    line-height: 150%;
}

Margins won't have any effect on <a> elements because they're inline. An alternative solution is to make them:

display: block;

which would mean they respected your margins, and you then wouldn't need your <br>s.

回复收藏 0 原文

内心荒芜 2024-08-03 13:40:07

链接不能定义边距，因为默认情况下它们是“内联”元素。内联元素不能应用边距或宽度规则。要允许内联元素应用这些内容，您需要向规则添加另一个属性。

试试这个：

#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>

您可以将边距或填充规则应用于

标记。如果您不想显示项目符号点，请使用：

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

Links can't have margins defined because by default they are "inline" elements. Inline elements can not have margin or width rules applied. To allow inline elements to have these things get applied, you need to add another property to your rule.

Try this:

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

I think for what you're looking to do, you should be using a list though:

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

You can then apply your margin or padding rules to the <li /> tags. If you don't want bullet points to show up use: