SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Box Model question

    Okay, super newbie question here...

    If I have...
    Code:
    <div>
    	<p>Some text goes here…</p>
    </div>
    Two scenarios:


    1.) If I add padding to the <div>, then I believe that causes the <div> to expand and become wider, right?

    2.) If I add padding (or margins) to the <p> then I believe that it "squishes" the <p> inside of the <div>, but the <div>'s width is unaffected, right?


    Debbie

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    1.) If I add padding to the <div>, then I believe that causes the <div> to expand and become wider, right?
    Not necessarily. If the <div>'s parent element has a fixed width then your child div will retain it's current width (assuming it's set to 100%) and the content will be pushed inwards by the padding amount

    The easiest, imo, way to learn is to set up a simple html/css test and play with the styles and see what effect they have.

    In the mean time this is a good description of the css box model

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    If the <div>'s parent element has a fixed width then your child div will retain it's current width (assuming it's set to 100%) and the content will be pushed inwards by the padding amount
    Hm, not quite. Only if the child div has no width set will padding not add to its width. If it's width is set to 100%, the padding will be added to its width and it will blow out of the container.

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hm, not quite. Only if the child div has no width set will padding not add to its width. If it's width is set to 100%, the padding will be added to its width and it will blow out of the container.
    I'm confused.

    But first off, can you please my original two questions, Ralph, and then I'll come back to your latest point.


    Debbie

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    first off, can you please my original two questions
    But I'm not sure what turns them on.


    Quote Originally Posted by DoubleDee View Post
    1.) If I add padding to the <div>, then I believe that causes the <div> to expand and become wider, right?
    As webdev said, maybe. If it has a set width, then yes. But if it has no set width, then no.

    2.) If I add padding (or margins) to the <p> then I believe that it "squishes" the <p> inside of the <div>, [b]but the <div>'s width is unaffected, right?
    Yes, as long as no width is set on the <p>. If a width is set on the p (which it shouldn't be, in most cases) then, like a div with a set width, the padding/margin will be added to the overall width of the p.

  6. #6
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hm, not quite. Only if the child div has no width set will padding not add to its width. If it's width is set to 100%, the padding will be added to its width and it will blow out of the container.
    Yes that's correct and clearer than my

    (assuming it's set to 100%)
    which is misleading and what I meant was assuming it's left at its default width, which of course is 100%.

    Hopefully DD will do a simple test as suggested earlier and all should be revealed and made clear

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    But I'm not sure what turns them on.
    Ha ha.


    Okay, so I'm getting more confused here, so let's turn to a real example...

    Thanks to Paul O' - and others - I have my 3-column layout tweaked and understood again.

    My layout has 3 columns which are floats and position: relative. The Left and Right Columns are 200px. The Middle column has width: 100% and uses a -400px right-margin.

    In the Left and Right Columns I want to add "boxes" that contain various things. (In the simplest of terms, think of how your SitePoint profile looks with its "My Messages", "My Subscriptions" and "My Settings".)

    So, when I looked at my old code, I realized there are several ways to get the end effect I want, but then I was unsure of the "correct" technical way to do things?!

    As it stands now, I have...
    Code:
    .box{
    	margin: 20px 0;
    	padding: 0;
    	border: 1px solid #AAA;
    	background-color: #FFFFCC;								/* Buff */
    }
    Which means that my "box" is slammed up against the edges of the Left Margin.

    Then inside the "box" I have...
    Code:
    p{
    	margin: 0.7em 0 0 0;
    	padding: 0;
    	text-align: center;
    	font-family: Helvetica, Arial, Sans-Serif;
    	line-height: 1.4em;
    	font-size: 2em;
    	font-weight: bold;
    	color: #F00;
    }

    Anyways, my goal is to just create a CSS "box" with content inside that is written the most logical way and that scales the best as seen in my other thread: Seeking Polymorphic CSS Class?!

    Because a "box" may not always be constrained by a fixed-width Left Margin, I am thinking I should add the Padding to the <p>'s and do whatever is needed to keep the <div class=box"> at a predictable fixed width.

    Hope I am making *some* sense here?!

    Thanks,


    Debbie

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Hope I am making *some* sense here
    You have two sets of styles for .box there, which is a bit confusing. To keep the content of .box away from the sides of the column it's in, just give it some padding but no width. It you want a border around it too, then perhaps add a border and margins as well.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You have two sets of styles for .box there, which is a bit confusing. To keep the content of .box away from the sides of the column it's in, just give it some padding but no width. It you want a border around it too, then perhaps add a border and margins as well.
    See my edit above. The second set of code should be "p"...


    Debbie

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Which means that my "box" is slammed up against the edges of the Left Margin ... Because a "box" may not always be constrained by a fixed-width Left Margin ...
    I just don't understand what this left margin thing is.

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I just don't understand what this left margin thing is.
    I was low on sleep and think the conversation may have drifted.


    Let me back up!

    I have a Left Column that looks like this...
    Code:
    #pageLeftCol{
    	position: relative;
    	z-index: 2;
    	float: left;
    	width: 200px;
    }
    So that means it is a Fixed-Width Column.


    Questions:
    1.) If I add 20px Left & Right Margins to my 200px Left Column, then the Left Column itself shouldn't change, but the total width would increase from 200px to 20px+200px+20px=240px, right?

    2.) If I add 15px Left & Right Padding to my 200px Left Column, then the Left Column should NOT grow since it is "fixed width", right?

    As far as my understanding, there would just be less room *inside* the Left Column (i.e. from 200px to 170px) or is that incorrect?

    Thanks,


    Debbie

    P.S. BTW, I *did* read SitePoint's Box Model article, however, it didn't cover every question out there?!

  12. #12
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    Questions:
    1.) If I add 20px Left & Right Margins to my 200px Left Column, then the Left Column itself shouldn't change, but the total width would increase from 200px to 20px+200px+20px=240px, right?

    2.) If I add 15px Left & Right Padding to my 200px Left Column, then the Left Column should NOT grow since it is "fixed width", right?

    As far as my understanding, there would just be less room *inside* the Left Column (i.e. from 200px to 170px) or is that incorrect?
    1) Correct. The computed width will then be 240px.

    2) Wrong. The computed width will be 230px. If you want your total width to be 200px, then you must subtract the padding from the width.

    Total width = width + margin + padding + borders
    Maleika E. A. | Rockatee | Twitter | Dribbble



  13. #13
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    1) Correct. The computed width will then be 240px.

    2) Wrong. The computed width will be 230px. If you want your total width to be 200px, then you must subtract the padding from the width.

    Total width = width + margin + padding + borders
    Is there ever a way that adding Margins or Padding would NOT increase the Width of a Div/Column/Box?


    Debbie

  14. #14
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Yes. If you set your div to display:inline, because an inline element's width is that of its containing block. In that case the margin and width values will not take effect unless the div is floated.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, so this takes me back to my original question - which maybe I didn't spell out...

    If I have...
    Code:
    <div class="box">
    	<p>Some text goes here…</p>
    </div>

    Do I want to add padding to the <div> or do I want to add margins and/or padding to the <p>?

    What are the consequences of each approach?

    I had *though* in the past that adding padding to my <p>'s was pushing the text inwards and not screwing up my <div>'s widths, but apparaently I had that wrong.

    My end goal is just to make good decisions so I have a layout that behaves well and is easy to maintain.

    Since a good portion of my website will be content inside of "boxes", I need to make sure that I am doing things the proper way as I re-factor my website.

    Thanks,


    Debbie

  16. #16
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    There is no "best" way, so it's up to your very own preference and how you've set up your HTML.

    Adding padding to your p will not affect the width of the container (div) unless you set a width on your p that is equal to the width of its container, so you didn't have that wrong.
    So, if your container is 200px wide and you set padding to your p (without specifying a width on your p) then the container remains 200px wide.

    I find it more convenient to set padding on the layout container itself (div) instead of applying padding to various elements. I declare padding on a reusable div container once and be done with it. However, this is just my personal preference and is in no way superior or inferior to other methods. You could as well set padding to all elements. I prefer having all containers on my site to have the same padding and margins, which is why I set it on a generic layout div that will then be used for all content blocks that need a div container.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Without risking to confuse any more there is one point I would like to clarify and that is that the default width for block boxes (not absolutely positioned elements or floats) is actually width:auto and not width:100%.

    That means you can add padding and borders to the element without increasing its overall dimensions. The width auto effectively means the usable width of the element is reduced by the padding or borders that you add. If the element was width:100% then adding padding and borders would make the element's overall dimensions larger and in most cases would not fit in the space allocated for it.

    If your outer div is 200px width then you can add padding, margins and borders to the inner p element and it will still fit inside that parent div because the p element's width is auto and adjusts to fill the available space. If you add padding or borders to the parent div then that would increase the overall dimension of that parent div due to the fixed width.

  18. #18
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    There is no "best" way, so it's up to your very own preference and how you've set up your HTML.

    Adding padding to your p will not affect the width of the container (div) unless you set a width on your p that is equal to the width of its container, so you didn't have that wrong.
    So, if your container is 200px wide and you set padding to your p (without specifying a width on your p) then the container remains 200px wide.

    I find it more convenient to set padding on the layout container itself (div) instead of applying padding to various elements. I declare padding on a reusable div container once and be done with it. However, this is just my personal preference and is in no way superior or inferior to other methods. You could as well set padding to all elements. I prefer having all containers on my site to have the same padding and margins, which is why I set it on a generic layout div that will then be used for all content blocks that need a div container.
    I am sorta leaning both ways. Here is my thinking...

    Setting Top/Bottom Padding for <p> seems to make sense, because you may want to adjust that for all copy on your site. However, setting Left/Right Padding on <p> seems problematic, because you may not always want a "gutter".

    So for that, I would say that you would apply Left/Right Padding to "boxes". You could do the same for Top/Bottom, except then that has a multiplying effect with any Top/Bottom Padding you add to your <p>'s.)

    The only downside to adding Left/Right (or Top/Bottom) Padding to a <div> is that is expands the <div>'s original size...


    Debbie

  19. #19
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul O' to the rescue!

    Quote Originally Posted by Paul O'B View Post
    Without risking to confuse any more there is one point I would like to clarify and that is that the default width for block boxes (not absolutely positioned elements or floats) is actually width:auto and not width:100%.

    That means you can add padding and borders to the element without increasing its overall dimensions. The width auto effectively means the usable width of the element is reduced by the padding or borders that you add. If the element was width:100% then adding padding and borders would make the element's overall dimensions larger and in most cases would not fit in the space allocated for it.
    Okay, a few things...

    My Left Column is:
    Code:
    #pageLeftCol{
    	position: relative;
    	z-index: 2;
    	float: left;
    	width: 200px;
    }
    The purpose - in my mind - of #pageLeftCol, #pageMidCol_3, and #pageRightCol are that they serve as "containers" and nothing more. (They should not change their size, because my entire page structure builds off of them!)

    I would like to add "boxes" inside of the Left Column.

    A generic "box" would look like this...
    Code:
    .box{
    	width: auto;
    	border: 1px solid #AAA;
    }
    So, based on my understanding of what you said above, adding a 1px border would not affect my Left Column's width of 200px, right?

    Furthermore, if I added padding like...
    Code:
    .box{
    	width: auto;
    	padding: 0 1em;
    	border: 1px solid #AAA;
    }
    ...would also not affect my Left Column's width of 200px, right?




    If your outer div is 200px width then you can add padding, margins and borders to the inner p element and it will still fit inside that parent div because the p element's width is auto and adjusts to fill the available space. If you add padding or borders to the parent div then that would increase the overall dimension of that parent div due to the fixed width.
    But if I have "boxes" inside of the Left Column, and like the <p> they have width: auto, then the parent Left Column should remain unaffected, right?


    Debbie

  20. #20
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    If you have a parent container with a width of 200px and an inner container with a width set to auto (default, if no width is set), then margins, paddings, and borders do not affect the parent container.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  21. #21
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    If you have a parent container with a width of 200px and an inner container with a width set to auto (default, if no width is set), then margins, paddings, and borders do not affect the parent container.
    So it sounds like you would add Padding to my <div class="box"> to give some space between the border and the text? And that way you would only have to do it once on that container, and not on every child element (e.g. <p>), right?


    Debbie

  22. #22
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Yup.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  23. #23
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So it sounds like I can "have my cake and eat it too" for once?

    BTW, why is it that if I put a <div> inside my Left Column and add a 1px border, that NetBeans says its "Computed Width = 198px"?? (Isn't my <div> still 200px with 198px of "usable" space??)


    Debbie

  24. #24
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Because the border takes up 2px of space. 1px + 1px + 198px (difference) = 200px. If you set the width to auto and add paddings, margins, and borders, then your auto width is the difference, ergo x = width of outer container -border -padding -margin.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  25. #25
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Because the border takes up 2px of space. 1px + 1px + 198px (difference) = 200px. If you set the width to auto and add paddings, margins, and borders, then your auto width is the difference, ergo x = width of outer container -border -padding -margin.
    Okay, so "Computed Width" (in NetBeans) apparently means "remaining usable area after Margins, Borders, and Padding are taken away from the original <div>", right?


    Debbie


Bookmarks

Posting Permissions

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