#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    16
    Rep Power
    0

    Margin/Padding pushes paragraph, but resizes div. WHY?


    Hi all, thanks for your help. This is not behaving how I would expect and I cannot figure out why.

    Here is code that DOES look like how it should when viewed in the browser...

    PHP Code:
    <div style="width:996px; height:290px; margin:0px auto 0px auto">
                <
    div style="width:231px; height:290px; float:left">
                    <
    div style="width:231px; height:64px; border-bottom:1px solid #cccccc">
                        <
    p style="font-family:os-regular; font-size:12px; color:#999999">Text Here</p>
                    </
    div>
                    <
    div style="width:231px; height:226px">
                    
                    </
    div>
                </
    div>
            </
    div
    ...except that I want the <p> text to be moved down, closer to the bottom border. So I thought I would simply add some padding like this:

    PHP Code:
    <div style="width:996px; height:290px; margin:0px auto 0px auto">
                <
    div style="width:231px; height:290px; float:left">
                    <
    div style="width:231px; height:64px; padding-top:38px; border-bottom:1px solid #cccccc">
                        <
    p style="font-family:os-regular; font-size:12px; color:#999999">Text Here</p>
                    </
    div>
                    <
    div style="width:231px; height:226px">
                    
                    </
    div>
                </
    div>
            </
    div
    Except doing this for some reason I don't understand stretches the <div> to a combined height of its original 64px plus the 38px of padding.

    I thought the padding is not supposed to add to the height?
    I also tried adding a margin-top:38px to the <p> tag instead; however it produced the same result. The containing <div> changed height from 64px to 102px.

    Am I an idiot?

    Your help and direction is much appreciated!

    -Ji
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    831
    Rep Power
    275
    take a look at THIS and THIS .
    It may shed a little light on the subject for you.

    As for your second question
    Originally Posted by Jiketsu
    Am I an idiot?
    Do you really require an answer to that one?..lol

    Comments on this post

    • Jiketsu agrees : Fixed my misconceptions.
    Last edited by DonR; September 12th, 2013 at 03:16 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    16
    Rep Power
    0
    Thanks DonR for your time.

    That first link did not tell me anything new, but the second one sure summed it up.

    I haven't coded in a couple years, and call me crazy, I really remembered the height and width including both padding and content, having only the weight of any borders being added to the dimensions. I do have to agree with the author of the article in that the Traditional model makes more sense. Not sure if I will manually specify the box-sizing; I'll likely conform to the w3c standard.

    Believing my view of the box model to be correct, I assumed I was being an idiot for completely missing something else in the code that should maybe have been completely obvious.

    Although, I don't think I grasp why adding a margin-top to the <p> would also increase the height of the div. Sure it makes the <p> larger in height, but not large enough that the currently available "content" space of the div could not accommodate it?

    Am I an idiot?

    Curious, for positioning that text, would you feel that padding is the appropriate method or should I be using relative positioning?

    Thanks again, really helps me out. I think after these I'll be good

    Edit: I just tried to give you some reputation. Though it wouldn't allow me to choose anything other than 0. Is that normal? o.o
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    831
    Rep Power
    275
    Since different browsers have their own "default" css styling builtin for showing web pages, I normally use Eric Meyer's CSS Reset stylesheet first, to make everything look "the same" so to speak.
    Then, I will go about styling elements afterward.
    Also, make sure you use a DOCTYPE at the beginning of your web pages, so, IE will use "Standards" mode instead of reverting to its nasty "Quirks" mode.
    As for positioning your paragraph and DIVs, you could've probably just given a class to the paragraph and added a larger CSS line-height to give it top/bottom space.

    Another thing to watch for is the lovely "margin collapse" that can happen.

    Kravvitz would be the one to explain those things better and more in-depth than I ever could.


    As for the REP thing, you are new user and probably don't have any rep to give when you start out.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    16
    Rep Power
    0
    Thanks a bunch. I've got the correct doctype and all that stuff. Will eventually ditch the style tags and use a css file instead as well.

    Looking into the link. Thank you
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Welcome to DevShed Forums, Jiketsu.

    I would not recommend relative positioning for that. Some combination of margins, padding, and line-height would be much better.

    What relative positioning does is shift where an element appears to be without affecting the footprint of the element, so that other elements (that are not descendants of it) will act as if it's not relatively positioned. It's mostly only useful for making slight adjustments to positioning or sometimes for changing the order of columns. Here's a demo: http://www.css-101.org/relative-positioning/

    Originally Posted by Jiketsu
    Although, I don't think I grasp why adding a margin-top to the <p> would also increase the height of the div. Sure it makes the <p> larger in height, but not large enough that the currently available "content" space of the div could not accommodate it?
    It doesn't increase the parent <div>'s height (but does increase the grandparent <div>'s height). However, it does push the bottom border of that <div> down because the <p>'s top margin is collapsing, which effectively means that the margin gets "moved" to the next ancestor until it can't.

    Here are some good articles on collapsing margins:
    http://reference.sitepoint.com/css/collapsingmargins
    http://www.search-this.com/2007/05/0...ne-or-why-111/
    collapsing margins

    @DonR It took me a moment to realize that what he was describing actually was collapsing margins. These things are certainly easier to diagnose when looking at an example page.
    Last edited by Kravvitz; September 17th, 2013 at 12:51 AM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo