CODEWITHSUNDEEP
cssmenupaddingspacenav
user2080194
user2080194

Reputation:

padding for links vertical in nav bar

I have worked on a new menu for my site, but I cannot seem to arrange for space between the links vertically (I want more white space between links) Any advice?

html

<ul class="menu">
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#services">SERVICES</a></li>
</ul>

css

ul.menu
{
list-style-type:none;
list-style-position: inside;
margin:0;
padding:0;
padding-bottom: 1cm;
}



.menu li a, .menu li a:visited
{
padding:12px 0 0 0px;
font-family: 'Roboto Condensed', sans-serif;font-size:20px;font-weight:700;
color:#FFFFFF;
background-color:#09F;
text-align:center;
padding:3px;
text-decoration:none;

}

.menu li a:hover, menu li a:active {
background-color:#666;
}

As you can see I have attempted the gaps with a piece of css: {padding:12px 0 0 0px;} but no luck.... everything else works fine - see fiddle @ http://jsfiddle.net/DCxvy/

Upvotes: 3

Views: 7561

Answers (2)

zeusdeux
zeusdeux

Reputation: 521

If I'm not wrong, you want to insert space vertically between links. For that, all you have to do is:

.menu li {
  margin-bottom: 10px;
}

fiddle with the margin solution.

On the other hand, if you want the background of your menu to remain the shade of blue it is and have the colour change on hover then here is the fiddle for that. I have also refactored your css to arrange rules in a more intuitive manner.

fiddle with the menu background as a solid colour without white line breaks.

Upvotes: 0

BenM
BenM

Reputation: 53208

Anchors are by default inline elements. To add certain padding values, you need to render them as inline block-level elements. Add display: block to your anchor styles:

.menu li a { display: inline-block }

Also, you should note that your .menu li a style has two entries for padding. The latter one (setting padding to 3px on all sides) is overriding your earlier definition.

Here's a jsFiddle demo.

Upvotes: 2

Related Questions