padding-top without float:left?

Question

ul.menu_middle_inner li {
         display:inline;
         list-style:none outside none;
         padding:0 10px;
}

not sure if things are clear enough .. but for this piece of code, how do i use padding-top for this class?? unless i use float:left, padding-top:5px(say) doesnt work at all... I don want to use float:left..... hope i m clear with my question...

Answer 1

display:inline;

Paddings are not applicable to inline elements.

You need to turn it into a block-level element. Remove this line and the list will return back to being a block-level object.

If you need it to contract to the width of its content, you need float. Alternatively, try inline-block (may not work in all browsers).

Answer 2

try specifying padding in one go, instead of adding another padding parameter. padding direction goes clockwise, so it starts with top like so:

padding: top right bottom left;

so if you want to add padding on top:

padding: 5px 10px 0 10px;

that gives you 0 padding in the bottom. if you want to add to both top and bottom you can use shorthand:

padding: 5px 10px;

oh and you have to add display: block(or if inline-block);