/    Sign up×
Community /Pin to ProfileBookmark

padding-top: how does it work?

Copy linkTweet thisAlerts:
Jan 25.2013

Hi there,

Below is .menu_tp css sheet:

[CODE]
.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;}
[/CODE]

Below is the content line:

[CODE]
<div class=”menu_tp”>Dinning Org&nbsp;&nbsp;&nbsp;&nbsp;<input class=”cusrorp” value=”Organizer” type=”button”></div>
[/CODE]

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: [ATTACH]15339[/ATTACH]

Thanks,

[canned-message]attachments-removed-during-migration[/canned-message]

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweyJan 25.2013 — Try setting the margin on .cusorp to 0. It's probably keeping the line from being closer to the top of the <div>.
Copy linkTweet thisAlerts:
@simplypixieJan 25.2013 — 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'
[CODE].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;}[/CODE]
Copy linkTweet thisAlerts:
@wowauthorJan 26.2013 — 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.

[ATTACH]15341[/ATTACH]

[canned-message]attachments-removed-during-migration[/canned-message]
Copy linkTweet thisAlerts:
@wowauthorJan 26.2013 — What is different between "height:20px;" and "line-height:20px;"? Does the equation

line-height = padding-top + content's height + padding-bottom

hold?

Thanks,
Copy linkTweet thisAlerts:
@simplypixieJan 26.2013 — 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)
Copy linkTweet thisAlerts:
@COBOLdinosaurJan 26.2013 — 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.
×

Success!

Help @wow spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...