How do I create spacing between these list elements?

Question

I'm just wondering how I would put a 3 pixel space between the different list items in the following html? Also, how do I properly vertically align the text within those lists?

CSS:

body {
    background-color: #4a4a4a;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li {
    float: left;
}
a:link, a:visited {
    display: inline-block;
    vertical-align: middle;
    width: 318px;
    font-size: 12pt;
    font-weight: bold;
    font-family: helvetica, arial;
    letter-spacing: 4px;
    vertical-align: middle;
    color: #4a4a4a;
    background-color: #f99400;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}
a:hover, a:active {
    background-color: #fbc486;
}

HTML:

<ul>
<li><a href="#news">About</a></li>
<li><a href="#contact">Portfolio</a></li>
<li><a href="#about">Contact</a></li>
</ul>

So yeah, I just want to put a 3 pixel break of empty space (same as background colour) in between those 3 items to separate them in the navbar. And for some reason the vertical alignment of the text isn't working right.

if you want to separate them horizontally, you can use padding. If you want to separate them vertically, you can use line-height. — Keith, Oct 21 '13 at 16:21
Could be missing something here but do you not just need li { float:left; margin-right:3px; } — Dominic Green, Oct 21 '13 at 16:22

score 3 · Answer 1 · answered Oct 21 '13 at 16:21

3

I'd suggest:

li + li {
    margin-left: 3px;
}

JS Fiddle demo.

References:

CSS adjacent-sibling (+) combinator.

answered Oct 21 '13 at 16:21

David Thomas

249,100
51
377
410

Thank you so much, such a quick response too. Really appreciated! – user2903908 Oct 21 '13 at 16:34
You're very welcome indeed, and I'm glad to have been of help. :D – David Thomas Oct 21 '13 at 16:38

score 0 · Answer 2 · answered Oct 21 '13 at 16:26

0

If you want your text properly alligned within the a tag, use the same line-height as the font size is. e.g.:

a {
    font-size:12px;
    line-height: 12px;
}

answered Oct 21 '13 at 16:26

Sebsemillia

9,366
2
55
70

score 0 · Answer 3 · answered Oct 21 '13 at 16:26

0

use margin-bottom:

jsFiddle

li{
   margin-bottom:3px;
}

answered Oct 21 '13 at 16:26

Mohsen Safari

6,669
5
42
58

How do I create spacing between these list elements?

3 Answers3