I am trying to center my text in this "nav list" but when I add padding of "10px" it is pushing the height of the box down (i specified height to be 30 px and I tried changing it to max-height and adding a min-height but it keeps pushing it....)

any idea?

url = http://www.uuilliam.net/rugsale
where it says "text goes here"

css:
.nav {
background:#403f3f no-repeat;
height:30px;
margin:0 auto;
padding:10px 0px 0px 10px;
}

edit: I have "sorta" fixed it by removing the padding from bottom and right, however this is a hack? surely adding padding doesnt push height?
it still pushes the height but not as much.

You need to understand the W3c box model.

Margin = outside
border=in the middle (going around edge of box)
padding = inside
content = where the text goes..? :S

I am trying to make the text center both vertically and horizontally

ill try vertical-align and horizontal-align then?

Edit: Fixed using a hack

add line-height and make it the same size as your box i.e. my box was height:30x; so line-height is line-height:30px;

there are a few ways to centre text vertically.

Faking it with images
With line height
With display:table-cell
and vertical-align doesn't work as people think

padding = inside

Nope, padding does NOT go on the inside of the 'box', not reallyl, it's added to the width that you specify for your content.

http://www.guistuff.com/css/css_boxmodel.html

http://dev.opera.com/articles/view/3...-boxes-border/

Here's a 3d version of the box model: http://www.hicksdesign.co.uk/boxmodel/

Ohh, I see now xD
so to add 10px padding and get the correct size box my box size would actually be

width: 160px
height: 10px
padding 10px

If you want your box to be 180px wide and 30px high, then yes.

Padding is on the inside and therefor will add to the height of your box, so say box height is 20px plus padding-top 10px it will display a box of 30px height. On the other hand margin-top 10px wont increase the height of the box instead it will add padding on top of the box.

Read the articles I linked to on the box model, padding is NOT technically 'inside' the box at all.

The basic rule is that the computed width or height of an element is equal to: margin + border + padding + (width|height)

Understand that you are thinking as the "box" and the element are NOT the same thing.

With CSS you need to be thinking "out of the box", inside the box and all around the box.

Currently you thinking the "box" dimensions refer to the element, whereas the "box" is the bit in the middle (content area) and every thing "grows" from the "box" outwards to create the overall dimensions of the element.