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 tags because I couldn't figure out how to add vertical spacingn with CSS. I tried adding a

Solution 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

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

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

#linksinnera {
    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:

<ulid="linksinner"><li><ahref="#">1</a></li><li><ahref="#">1</a></li><li><ahref="#">1</a></li><li><ahref="#">1</a></li><li><ahref="#">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:

#linksinnerli { list-style-type: none}

Solution 4:

You need to give a padding or margin to the anchor-tags, not the divs. But actually don't, do this instead:

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

and give the p's a padding-bottom or padding-top.