www.webdeveloper.com
Results 1 to 7 of 7

Thread: padding-top: how does it work?

Hybrid View

  1. #1
    Join Date
    Feb 2011
    Posts
    78

    padding-top: how does it work?

    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;}
    Below is the content line:
    Code:
    <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,

  2. #2
    Join Date
    Mar 2011
    Posts
    1,138
    Try setting the margin on .cusorp to 0. It's probably keeping the line from being closer to the top of the <div>.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Aug 2012
    Posts
    155
    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;}

  4. #4
    Join Date
    Feb 2011
    Posts
    78
    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
    Last edited by wow; 01-26-2013 at 12:37 AM.

  5. #5
    Join Date
    Feb 2011
    Posts
    78
    What is different between "height:20px;" and "line-height:20px;"? Does the equation
    line-height = padding-top + content's height + padding-bottom
    hold?

    Thanks,

  6. #6
    Join Date
    Aug 2012
    Posts
    155
    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)

  7. #7
    Join Date
    Aug 2012
    Location
    Canada
    Posts
    56
    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.
    Cd&
    one of my toys And my repository and my old self ranting plus a bonus Getting the most out of Q/A sites
    Code that is 100% standards compliant is 100% correct 100% of the time... anything else is just a hack

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles