CSS Menu Gaps

Hi All,
I would like to know how to create gaps between my menu items. What I mean is suppose I have a navigation section on my web page which is made up of 5 rectangles stacked on top of one another. I would like to separate each rectangle from the rest of the rectangles in the menu with gaps above and below each rectangle. Any help will be greatly appreciated, thanks in advance.


You so that with Margins. If not working you need to make them block.

Lists, <ul> <ol>, have vertical margins applied by default. List items, <li>, do not. As Eric said, you can apply vertical margins to the list items to separate them.

li {margin:10px 0}     /* like this */

It is sometimes a good idea to set the default vertical margin of the list to zero to prevent an unexplained mysterious force from pushing the top of the page down from the top edge of the browser window.

ul {margin:0}

Hi EternalWeb. Welcome to the forums. :slight_smile:

If the answer above don’t help, then please post your code, or better still, a link to the site. Then we can give more specific help. :slight_smile:

Thank you all for your input, your suggestions have helped a lot. I was able to create the look and feel I’ve been searching for thanks.