Why do bottom padding and bottom margins not help to add vertical spacing between these links?

问题

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>

回答1:

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

回答2:

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.

回答3:

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: