padding-top: how does it work?

[wow]

Hi there,

Below is .menu_tp css sheet:

.menu_tp{background:url(images/wldcs_list_bg.gif) no-repeat;}
.menu_tp{width:570px;height:20px;margin-top:8px;
 padding-top:15px;padding-left:20px;line-height:20px;
 color:white;font-weight:bold;background-position:left 0;}
.cursorp{cursor:pointer;}

Below is the content line:

<div class="menu_tp">Dinning Org&nbsp;&nbsp;&nbsp;&nbsp;<input class="cusrorp" value="Organizer" type="button"></div>

When I try to move "Dinning Org" a little bit up because it's too close to the bottom line by adjusting padding-top from 15px to 10px, it does not move it up, but instead narrows the line height. Please click the attached picture for them shown on screen. How can the content be shown in middle vertically and also the "Organizer" button lines nicely with it? How to change the css sheet to put these two align to left and right side separately instead by space?

Please click on the attachment to see how it's shown on Firefox: 1.jpg

Thanks,

[rtrethewey]

Try setting the margin on .cusorp to 0. It's probably keeping the line from being closer to the top of the <div>.

[simplypixie]

Padding is applied inside the 'box' and margins are outside so if you change the padding then that will give you the result you have. If you want to move closer to the top then reduce your margin-top instead.

Also you are declaring .menu_tp class twice in your css, these need to be combined into one 'rule'

.menu_tp{background:url(images/wldcs_list_bg.gif) no-repeat; width:570px;height:20px;margin-top:8px;
 padding-top:15px;padding-left:20px;line-height:20px;
 color:white;font-weight:bold;background-position:left 0;}

[wow]

Thanks, rtrethewey and simplypixie for your help.
I change them as your suggestion, but it seems change nothing. Please check the attached picture for the result. Where is the problem? I look at the box model, the result just doesn't match.
2.jpg

[wow]

What is different between "height:20px;" and "line-height:20px;"? Does the equation
line-height = padding-top + content's height + padding-bottom
hold?

Thanks,

[simplypixie]

What exactly are you trying to get it to look like and what is the relevant html and css?

height - this is the set height of a div

line-height - this is the height of each line of text (i.e. paragraph or header)

[COBOLdinosaur]

Any number of things in a page can affect the rendering of an element. The doctype, cascade, surrounding tagging, and invalid code to name a few. If you want a diagnostic, then post a link to the page so we can see everything that is going on in the page.