ansaurus

Question

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

Answer 1

+1 A:

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.

RichieHindle 2009-07-16 00:17:18

Answer 2

+3 A:

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 pagging for top and bottom get applied correctly

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

Darko Z 2009-07-16 00:18:01

I was just about to say that...

jeroen 2009-07-16 00:19:52

then we agree :)

Darko Z 2009-07-16 00:20:26

Why would you make a-Tags to block-Elements just to separate them vertically? Enclosing them in a block-Element is more appropriate imho.

stefanw 2009-07-16 00:24:12

why add another layer of elements when you dont need to?? that would be adding another layer of elements just for presentational purposes. CSS should be used for that...

Darko Z 2009-07-16 00:26:12

@Darko - good point. I think your approach makes sense. I need to read up on block vs inline. It seems like I keep running into this block vs inline problem all the time without ever recognizing it's the cause of my issues. Thanks!

gday 2009-07-16 00:36:31

Answer 3

A:

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:

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

Dan Herbert 2009-07-16 00:20:23

this doesn't work cross browser. to get inline-block to display correctly on all browsers there is a hack, but its not as simple as you have it.

Darko Z 2009-07-16 00:21:50

Why won't that work cross browser? It is supported in every major browser: http://www.quirksmode.org/css/display.html

Dan Herbert 2009-07-16 00:26:57

the link you provide says the support is incomplete for IE6 and 7 and no support at all in FF2. Im not sure how you can deduce that it works in every major browser from that...

Darko Z 2009-07-16 00:28:30

Firefox 2 has fairly low market share (It's a few major versions behind) and IE6/7 work for anchor tags, which is exactly what was used in my example. The "incomplete" for IE6/7 should really be "buggy" however, since it can work provided you trigger hasLayout correctly, although it doesn't matter for anchor tags.

Dan Herbert 2009-07-16 00:30:51

Answer 4

A:

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

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

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

stefanw 2009-07-16 00:21:21

ansaurus

tags:

views:

answers:

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

related questions