I want to make the padding around "Products" in the Navigation Bar WIDER than the rest.

I know this seems as simple as just increasing the padding px value, but I tried it and it doesn't work.

I tried to give its own class with a larger padding, and still didn't work?

all help is appreciated.

Thnx, J

  • Please add a link to the pagecurrently http://www.urichdesigns.com/inner.html link is 404, and the attached HTML is empty Oli Studholme almost 8 years ago

3 answers


You need to make the element a block element. I assume you are trying to add padding to the anchor tag within the list item. try this:

    li a {display: block; padding: 10px}
    <li><a href="link">Navigation</a></li>


Answered almost 8 years ago by Blake M. Scarbrough
danwellman 5600

To make it wider set the left and right padding on the <a> after making it a block element. If this doesn;t work, try padding on the <li>, which should already be a block element.

If neither of these work, try left and right margin on the <a>

Answered almost 8 years ago by danwellman

A point worth noting is that older versions of Internet Explorer messed up padding, so it's always a good idea to avoid horizontal padding on an element and better to add a margin to whatever is inside the box to create space around it.

Answered almost 8 years ago by Tony Crockford