Geek Answers Handbook

Why don't the bottom and bottom margins add vertical spacing between these links?

I have a div with links in it. And I build them on top of each 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 complement to the 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 accept there a more convenient way to do this with CSS, which I just couldn't 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>
+4
source share
4 answers

Vertical margins and padding only work on block level elements such as div and p . a is an inline element, so it does not work.

To do what you need, you need to add the following style to your links:

 display:block;

only then the marker and paging for the upper and lower will be correctly applied.

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

+9
source

To add vertical spacing, you can do this:

 #linksinner { line-height: 150%; }

Fields will not affect <a> elements, since they are embedded. An alternative solution is to create them:

 display: block;

which would mean that they respected your fields, and then you do not need your <br> s.

+1
source

Links cannot have fields, because by default they are "inline" elements. String elements cannot apply margin or width rules. To allow inline elements to use these things, you need to add another property to your rule.

Try the following:

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

I think that for what you want to do, you should use a list:

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

Then you can apply field or padding rules to the <li /> tags. If you do not want the markers to be displayed, use:

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

You need to specify indentation or margins for anchored tags, not a div. But don't really do this:

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

and give p padding or bottom cover.

-1
source

More articles:


All Articles