CSS Padding and Width…

Is it only me that thinks that the ‘padding’ value of html elements getting added to the width value of html elements is stupid? ‘Margin’, yes that should be added because it is on the outside of the element but if I set a div to be 750px wide I don’t mean it to become 770px wide when I add 20px of padding.

Whose bright idea was that?

Advertisements

67 Responses to “CSS Padding and Width…”


  1. 1 Nick Harris April 9, 2007 at 11:12 am

    The idea is that the width value is the size of the content within the container. So if you have a div with width: 300px; padding: 20px; border: 1px solid #000; your content is constrained within 300px with your border being 20px away from it.

  2. 2 Graham Pengelly April 11, 2007 at 9:20 am

    Hi Nick

    Thanks for dropping by 🙂 That sounds fair enough I suppose but still for me I think it would make more sense to make the element the style was applied to maintain the width you set and have the padding subtracted inside if that makes sense.

    For example, if I have an outer div for my page that is say 740px wide and I want two columns with a bit of padding I’d like to be able to split that into two, 200px and 540px and have done with it but once you have to start worrying about 2 x the border thickness and 2 x the padding I think it just complicates matters.

    Perhaps I’m only thinking of a couple of examples and there are undoubtedly other uses where the way it actually works makes more sense but I still think, for me at least, it is arse about face.

  3. 3 Andrew Disley April 17, 2007 at 12:43 pm

    Graham, you may already know this but if not. Remember that IE box model.

  4. 4 Graham Pengelly April 17, 2007 at 1:15 pm

    IE box model aside. If I declare a div with width:100px and padding:20px, even in Firefox it comes out 140px wide, regardless of the content which doesn’t have any width specified (as there isn’t any in this example). Surely if I wanted a 140px wide div the way to achieve that should be to state – width:140px.

    According to the spec (http://www.w3.org/TR/CSS21/box.html#box-dimensions), and Nick (above) I am actually defining the content width rather than the width of the div and so, in my opinion that is counter intuitive.

  5. 5 binary_star August 26, 2007 at 4:16 pm

    I am totally with you that it is counter-intuitive. just like i think it’s counter-intuitive for a lot of people to admit that the w3c got something wrong and microsoft got something right.

  6. 6 Brian February 14, 2008 at 8:50 pm

    I totally agree with this post, it is something that has often bothered me.

  7. 7 me March 17, 2008 at 11:04 am

    Yes. Padding excluded from width is shit. I would like to ask some of the W3C guys, how to define percentual width 100% and accurate padding 15px (I mean the inner space between borders and content), so that box will not overflow width of the screen (without bottom scrollbar).

    W3C CSS Box model is SHIT SHIT SHIT! And not only box model…

  8. 8 me March 17, 2008 at 11:16 am

    Btw. I know about workaround with next box with margin … but that’s not the solution…

  9. 9 Jim September 3, 2008 at 2:50 pm

    You know really it would make sense to have 2 mutually exclusive values…. either a padded-width for when you know the width of the box and want the content to be padded inside that box, and width for when you know how big the content is and want the box to be padded outside it.

    Its really for two cases, the current model is great if you have an image and you want some padding around it, then a border, and then a margin. But the current way stinks when you know you want the page to be a certain size and you want the text within the page to be a few pixels away from the border.

  10. 10 Adam October 7, 2008 at 3:00 pm

    ‘Me’ is correctly pointing out why this is broken. With the current box model, you can’t add padding to 100% wide box without causing it to be larger than 100%.

    So yea, I agree it doesn’t make sense.

  11. 11 Micah January 5, 2009 at 5:54 am

    This is a horrible box model. The box model should be geared toward helping web designers cut up their web pages, not for special uses with images or whatever. Graham, I’m sure there are more examples of people frustrated by the current box model than those who are thankful for it (so no need to be sheepish). It just seems counter-intuitive for the width (or height for that matter) not to be the space from border to border.

  12. 12 el February 28, 2009 at 5:59 pm

    I understand your disappointment. Lord knows, as a graphic designer, I’ve pulled many a hair out over this very issue.

    Though, there is a way. Sort of.

    Let’s say, for example’s sake, you have a div that’s 100px wide. You want an element, and h1 or such, to be 100% of that 100px width, but with a 15px padding on the left and right. You can accomplish this by using the padding-specific method and percentages. i.e. –

    .example{
    width: 100px;
    margin: 0;
    float: left;
    }

    .example h1{
    width: 70%;
    padding-right: 15%;
    padding-left: 15%;
    margin: 0;
    float: left;
    }

    This is, of course, assuming your containing div is 100px wide, therefore the 15px padding you desire coming out to 15%. Basically, take your full pixel width and find the percentage of that width your desired padding would be. Then define that as your padding.

    Hope that helps.

  13. 13 Adam Alton March 24, 2009 at 1:41 pm

    I completely agree. Having the padding add to the specified width is completely stupid. My stylesheets are always full of comments explaining how my widths have been calculated so that when I change some padding or something I can figure out how to adjust the width(s) to keep it the same. I do hate the W3C sometimes.

  14. 14 Stewart March 25, 2009 at 2:32 pm

    Me too. For a start, the name, width, implies the width of the element. Just as background means background of the element and border means border of the element. To define width to be width of the content is an inconsistency.

    And it takes away some of the usefulness of padding. Suppose you want two panels side by side of equal width, and to have a gap between them. Something like this should work:

    .left {
    position: absolute;
    left: 0;
    width: 50%;
    padding-right: 1em;
    }

    .right {
    position: absolute;
    right: 0;
    width: 50%;
    padding-left: 1em;
    }

    Seems I’ll have to either make do with a gutter width in % or add another level of nested divs.

    Another annoyance is that the parent div doesn’t grow to their height. And so I find myself using float instead and adding

    to the HTML. I think it’s down to the design of the overflow property. It should’ve had a ‘grow’ value from the start. What’s more, this value ought to be the default.

    I sometimes wonder whether CSS positioning’s designer (or even W3C) ever actually tried applying it to real-world problems.

  15. 15 Godofredo September 8, 2009 at 6:20 am

    “Padding excluded from width is shit. I would like to ask some of the W3C guys, how to define percentual width 100% and accurate padding 15px”

    I in fact never use padding because this fu** w3c definition. If I need a “padding” I always use a new div with margin inside the div I want to padd.
    Padding as it is is really stupid and unusefull.

  16. 16 Stewart September 8, 2009 at 3:34 pm

    Maybe what we need to do is split width into width-value and width-edge or something like that. The values for width-edge could be:

    * outside-border
    * mid-border (could be useful for tables)
    * inside-border
    * inside-padding

    among possibly other values. And the same for height.

  17. 17 mihneasim November 14, 2009 at 11:28 am

    I agree!
    Although, on the other side, some idiot could enter a bigger padding than the overall width..

  18. 18 Stewart November 14, 2009 at 1:53 pm

    Some idiot can also define a width greater than the max-width. The same applies – presumably it’s up to the browser how to handle such inconsistencies.

    That gives me a thought – maybe the aforementioned overflow: grow could be combined with other values, as a fallback for if it can’t grow enough without exceeding the max dimensions set on it.

  19. 19 Eugene Kerner December 8, 2009 at 1:03 pm

    Im sure gonna cast my vote on this one …

    Padding is not useless if you consider the requirement by tables.

    And tables – although the div-heads out there will argue – are very usefull in certain applications.

    But as for padding adding to the width, it breaks everything.

    2 reasons: –
    1: As aforemention by many with:100% plus padding doesnt add up.
    2: e data – in many applications – sooner or later needs to translate to hardcopy – and your local printery would go nuts if you added padding to the width of an A4 😉

    Thanks, gr8 page!
    Eugene.

  20. 20 Eugene Kerner December 8, 2009 at 1:31 pm

    Further, in reply to Stuarts thinking which I like …

    I agree css should define extra width settings, all that stuart mentioned plus one to account for inside-margin (or outside-padding).

    [(width|height)-]outside-border
    [(width|height)-]mid-border
    [(width|height)-]outside-margin
    [(width|height)-]outside-padding
    (width|height) /*really [(width|height)-]inside-padding but lets not rename it and break everything even more*/

    Eugene.

  21. 21 Stewart December 8, 2009 at 1:36 pm

    What’s a div-head? Someone who insists on use divs even where tables are logically far more appropriate?

    You can get it to work with tables – just set the width on the col elements rather than the td’s.

    However, browsers vary in whether doing so makes the widths add up when you have borders.

  22. 22 Ali February 6, 2010 at 11:25 pm

    I almost go crazy every time adjusting width and padding, mostly for input elements!
    I dont know which stupid idiot came up with this idea, but damn who the hell he was!

  23. 23 Willfrost February 20, 2010 at 5:14 am

    Why should we have to re-calculate the width of a div when we just want to add or remove a little padding. WC3 should have thought a little harder about this before making it the standard.

  24. 24 Some guy March 29, 2010 at 10:32 pm

    I’ve had this problem before, as well. Some of the fixes mentioned above only apply if you’re using px widths, not percentages. The way I fix this problem with percentages is just to have two div styles, inner and outer. Set the outer style however you want, and then set the inner style width at 100%, with as much padding as you like. Put all your content inside that element. The overall width of the outer element won’t change, and your content looks the way it should.

  25. 25 psycho_nude May 21, 2010 at 8:15 pm

    Are we now to go back to outer divs for width, and inner divs for padding! I thought now that IE had fixed its broken box model it was safe to go back in the css water.

    I always disliked the unintuitive W3C box model for forcing us to calculate and recalculate the ‘actual’ width. But its not just preference; the W3C made an objective error that 100% + padding = 100%.

  26. 26 Stewart May 22, 2010 at 3:04 am

    That’s exactly the point we’re all trying to make – the annoyance that you need to use an outer element to specify the width of the box in % and then an inner one to add padding in ems or whatever. Kind of defeats the point of CSS, which is to enable you to keep your HTML code logical while having control over the formatting.

    And it isn’t a bug in IE or anything like that – but an annoying quirk of the CSS spec. See my previous comments.

  27. 27 Mattz93 May 30, 2010 at 4:09 pm

    It bothers me as well when creating my websites. It’s a knowledge of maths, I suppose.

  28. 28 Tony Peacock July 4, 2010 at 8:32 pm

    I agree 100%…. I want my box to be a desginated width and only that width. But I also want the contents to be padded from the inside of the box. In this case the box should not get larger.

    And sometimes when I use another div inside with margin to combat this ridiculous box model, it still ends up pushing the outside container away from other objects as well (in some browsers).

    I am all for standards if they should make sense and the way padding is handled absolutely does not. Get it together W3C.

  29. 29 Amanda August 11, 2010 at 8:16 pm

    I completely agree that this is stupid. The width should be exactly what it is specified to be. I recently had this same problem and it is extremely annoying.

  30. 30 G August 22, 2010 at 8:43 pm

    I agree with the box model being annoying.
    Here’s the solution to the div with 100% width and 15px inner padding:

    outer div with “width: 100%”
    inner div with “padding: 15px”, no width

    There were some answers in the thread with all px units, just wanted to make sure it’s clear that it’s also possible with percentages and pixels mixed.

    • 31 Stewart September 3, 2010 at 1:30 am

      Why set width: 100%? Isn’t that the default? It seems to me you don’t really need the outer div at all.

      But if you want the width to be something other than 100%, then you do need the double div. If your layout is more complicated, you could end up with these doubled divs all over the place. See my previous comments.

  31. 33 Bad Bob January 9, 2011 at 7:08 am

    If people spent as much time working on their designs as they did piddling over the ‘small stuff’, the web would be a more beautiful place!

    http://amplicate.com/hate/w3c?sort=featured

    and I quote:

    w3c is for people with no experience to say hey, look i get no errors so i must be good.

    If you perform w3c validation checks on any site for a business making at least a million a year you’re going to see tons of “errors” but yet their sites function perfectly in all browsers.

    What’s up with that.

    Anyone do a w3c validation on google.com? msn.com? yahoo.com? roomstogo.com?

    The only sites I’ve seen really concerned about w3c are small businesses and I honestly have no idea why.

    Any time you have a group of volunteers, with their heads up their collectives asses, you have W3C. This group can not disappear too quick.

    Omg I hate W3C Validation Ayatollahs

    • 34 Stewart January 9, 2011 at 2:12 pm

      “If you perform w3c validation checks on any site for a business making at least a million a year you’re going to see tons of “errors” but yet their sites function perfectly in all browsers.”
      Prove it.

      What has all this to do with the topic of discussion, anyway?

  32. 35 Silence Dogood March 5, 2011 at 4:14 am

    Use tables. Set the width of the cell and padding is applied not effecting the set width. Seriously they need to give us something better than float and inline-div before I’ll stop using tables.

  33. 36 supershwa April 5, 2011 at 8:39 am

    I totally agree. This has always come up as a screwy issue in my book — especially when using “width: 100%;” in CSS. Using padding in addition always causes the element to overflow outside its container…the calculation is always (element.width = css.width + css.padding)

  34. 37 Dan April 14, 2011 at 6:07 pm

    You can use

    -moz-box-sizing:border-box;
    box-sizing:border-box;

    to defeat the W3C box model in most browsers. This will give you a consistent “IE style” box model.

  35. 38 steve May 13, 2011 at 6:38 am

    The golden mantra is

    Use margin on children
    not padding on parents

    • 39 daniele June 4, 2011 at 3:24 pm

      Yeah but what if I had 10 children? Why should I be forced to define a margin for each of them? Sure, I could nest all of them inside an outer div, but hey wasn’t divs+css all about logic and neat design?

      Nice post btw.

  36. 40 Andrew Cobby (@andrewcobby) September 1, 2011 at 1:33 am

    I use Less CSS (http://lesscss.org) which allows you to use variables and mathematic equations. Combining the two, you can workaround this:

    #myElement {
    @width: 200px; /* How wide you want the element */
    @padding: 15px; /* How much padding you want */

    padding: @padding;
    width: @width – (@padding * 2); /* Calculate actual width */
    }

  37. 41 Ruben September 1, 2011 at 9:48 am

    Yeah, this is really annoying.. But like @steve said, you can bypass this by setting margins on all children:

    .container {
    width:100%;
    }
    .container > * {
    margin:20px;
    }

  38. 42 ancarius October 21, 2011 at 1:58 pm

    You could probably use something like:

    .container {
    width: 300px; // whatever you want your container to be
    }
    #content {
    max-width: 100%;
    padding: 20px; // whatever you want as padding
    }

    That way the content stays inside the container no matter what. You’re essentially telling it to just pad the content with 20 pixels and don’t let the container grow larger than 300 pixels.

  39. 43 ceph November 13, 2011 at 6:04 pm

    The completely retarded thing about this box model is that left and top describes the element INCLUDING the padding, but width and height does not.

    To have a 90% width and height content with 5% padding on each side we end up specifying

    div#myBox {
    left: 0%;
    top: 0%;
    width: 90%;
    height: 90%;
    padding: 5%;
    }

    zzz

  40. 44 Raz November 16, 2011 at 12:15 pm

    You people are all retarded.

    “‘Margin’, yes that should be added because it is on the outside of the element” – What the hell man, are you actually listening to yourself?

    Add margin to the width because it’s on the outside? What the hell!

    Stupid stupid and stupid. All of you.

  41. 45 jondaydesign November 21, 2011 at 2:23 pm

    I don’t understand what all the fuss is about. A logical person would simply reduce their width by the padding they need…if the padding is “adding” unnecessary width. So if I have an input field that is 100px wide, but I need to add 5px of padding to the interior for typing…I could easily define this field with a width of 95px, width a padding-left of 5px…and the resulting field will be 100px wide. Problem solved.

    • 46 Jeme February 12, 2012 at 10:47 pm

      I think your confusing “logical” with “practical” here.

      If not i guess your the strange one, since you seem to be the only one here that finds it to be “logical”. (the one that doesn’t agree with the crowd is always the strange one)

  42. 47 mkb November 22, 2011 at 5:29 am

    @jondaydesign: Nope. Suppose you don’t know how wide the field/element will be in pixels (which is often good practice if you want your page to render at different scales). For example, what if you want a div that is 100% page width with a 15px internal padding. Try it. You get a div that overflows the page width by 15px, causing horizontal scrollbars to appear. You can’t know how much to decrease the div’s width by, because it is specified in %, not pixels. There is no workaround other than not to use padding (use another level of div with 15px margin). It is pretty retarded, you have to admit.

    • 48 jondaydesign November 22, 2011 at 2:37 pm

      @mkb – I understand that situation, although that’s not really the situation that was described in the post, which read:

      “Is it only me that thinks that the ‘padding’ value of html elements getting added to the width value of html elements is stupid? ‘Margin’, yes that should be added because it is on the outside of the element but if I set a div to be 750px wide I don’t mean it to become 770px wide when I add 20px of padding.”

      As you can see…the above is giving an example of an element for which we have a predetermined value.

      If you have a div that is 100% wide, I can only assume it is not filled with content that needs to fill a certain width of space (otherwise, you could opt to use a specific width)…probably looking at something more like a background, or a container…not an actual content div. In that case, simply use your padding (I’m assuming padding left) and then set overflow-x:hidden which will eliminate your scrollbar.

      • 49 J January 27, 2012 at 8:55 pm

        This will certainly truncate the container’s content to the specified width but will not actually limit the container thereby eliminating horizontal scrollbars. Like the width property, and which is the reason we are all up in a fuss, overflow-x is a property which is applied to the container’s content and not the container itself. This is clearly explained, also, by the W3C: http://www.w3schools.com/cssref/css3_pr_overflow-x.asp

      • 50 Jon Day January 27, 2012 at 9:51 pm

        I understand that you guys are all up in a fuss, what I don’t understand is why. I myself have achieved various implementations, as described, with little to no difficulty. Perhaps that’s why I’m having a difficult time understanding “what all the fuss is about”.

        If you set a container div to 100% width, and set overflow-x:hidden, anything which is beyond 100% of the screen will not be visible, content or otherwise. If you find that your padding is effecting this negatively (in that it truncates the content to where some it cut off), you change it, might have to try a few things out. From what you’re describing, padding is not even needed, so I’m not sure why it’s even an issue. Considering the vast degree of variations in any given scenario, there is no magic bullet solution…you might have to experiment a little.

        Additionally, it’s over-simplified to say “This will certainly truncate the container’s content to the specified width but will not actually limit the container”…as the container is generally defined by: its content, or its container. So, I’m having a little difficulty understanding your point. If the container itself is the primary container, and only has content…it, in itself will be defined by the content or the body (if given a size attribute)…unless it’s given a specific width such as 100%, in which case your above statement doesn’t even apply.

        One thing some people seem to be forgetting about is negative margins, which can easily be used to compensate for padding.

        #container{width:100%;overflow-x:hidden;}
        #container #content{padding-left:20px;margin-left:-10px;}

        You can even center divs this way…especially if the container div has 100% width, and the content div can be set to be a specific width…in which case you could define the margins as negative 1/2’s of the width, which would position it directly centered within the container, if you also provide some 50% attributes.

        I’ve written this in a hurry, but perhaps it might clear some things up.

  43. 51 Justin January 21, 2012 at 5:54 pm

    adding my two cents here.

    Dan’s idea of:

    -moz-box-sizing:border-box;
    box-sizing:border-box;

    I could try to explain why this was the only thing that worked for me, but it’s complicated (it involves form inputs with background images to fake a rollover label). Trust me though, it’s the only way I can maintain a 100% width and a padding without there being a clusterf***.

  44. 52 shinymetaldeathgod June 5, 2012 at 4:25 am

    I know this is an old thread, but I thought I’d chime in: The CSS Box Model is total shit. It’s something I’ve been struggling to grasp for some time now, in that I can’t even add a 1 pixel border to a set of divs for a 2 column layout without overflowing the second column, where scaling should be much easier. I’m sure there will be plenty of apologetic drones to rebut everything I say, but at this point, I’m in no mood for debate. Just the simple fact that something such as a border or padding isn’t calculated as width should be enough to see that CSS is basically just a massive kludge.

  45. 53 PJF June 12, 2012 at 5:27 pm

    The w3c Box Model is total crap, and one the reason people cling to using tables for layouts to this day.

    Some have claimed the main reason the w3c forced this bs on us all was to stick it to ‘big bad’ Microsoft in the late 90’s. Which honestly is the only reason I can think of why the w3c came up with such a silly design.

    So remember next time this Box Model makes you rage, you’re stick with it because some super nerds were butthurt about Microsoft 15+ years ago.

  46. 54 N August 21, 2012 at 3:18 pm

    I think just setting the padding on another div would make this a non-issue…

    Text

    Unfortunatly I’m facing a rtf editor that doesn’t allow me to get the extra div in:P

  47. 55 A. Langueduc September 17, 2012 at 5:04 am

    The extra width added by the padding is definitively not a good idea. I really don’t speack about only paddings… borders, especially these one, are much more important than paddings and they are the ones that cause most problems. In a responsive page using percentages with lots of childs elements, it’s very cumbersome to figure out which border or padding is causing the page not rendering properly.

    I thinks that w3c should let authors to decide if borders or paddings should be consider part of the width or an extra part of it. If I remember, they even plan to do it in a future css versions. And maybe css3 already provide such feature.

    A. Langueduc

  48. 56 Yves November 2, 2012 at 6:38 am

    I agree with (most of) the posts above: padding should be part of the width.

    Would be logical, intuitive AND convenient.

    For people having difficulties with the width in % (adding padding in px is painful), see the post above by “el” that addresses the problem.

    I’m afraid CSS was not designed by computer scientists 😦

  49. 57 Tor I. November 28, 2012 at 9:57 am

    I wonder if the relevant members of the W3C have ever sent packages by mail: Imagine the laughs they would get at the post office when they show up with box, item and padding and proceed to try and affix the padding to the outside of the box… 🙂

    • 58 Alphonse Langueduc November 28, 2012 at 9:03 pm

      CSS box models are not postal boxes and it’s utterly stupid to force developers to recalculate width (often relative ones) each time they add a padding.

      So I share Graham Pengelly’s opinion entirely and I also completely agree to Microsoft attempt to change this in IE5 (or 6?).

      W3C Org should definitively reconsider.

  50. 59 steam cleaning in troy April 10, 2013 at 5:18 am

    Hello! This is my first visit to your blog! We are a team of volunteers and starting a new project in a community in the
    same niche. Your blog provided us beneficial information to work on.
    You have done a extraordinary job!

  51. 60 www.bit.org.tw May 11, 2013 at 7:09 am

    I find it so inspiring that I’m not the only human out there over the age of 20 who doesn’t know this kind of
    stuff! Time to learn *about all of it*.

  52. 61 Simon July 27, 2013 at 4:07 am

    I agree it is non sense.
    Why don’t we ASK w3 org and browser vendors to change it?
    LET’S START THE MOVEMENT: 100% + PADDING = 100%
    Is a viral marketing expert here to show us the best way?

  53. 62 rolling clothing racks July 29, 2013 at 1:03 pm

    This same dynamic applies to guys they can’t cope with the consideration they will get by taking on the. Women appreciate when you are extremely courteous to them’ It really
    should only just take one particular date like this for you to be deemed boyfriend and girlfriend.
    When I to start with stared this article, I requested many
    people I knew what sort of activities they have had with inadequate buyer company.

  54. 63 ByeLaw August 19, 2013 at 9:09 pm

    Hmmm.

    I have a CSS which defines a top header as 100%, then another with padding of 1em. So:

    #topContainer{
    width=100%;
    }
    #topContent{
    margin: 0em;
    padding: 0em;
    background: #367E8A;
    height: 4.5em;
    padding:1em 1em 1em 1em;
    }

    I then use:

    some content

    Does this work for you??

    • 64 ByeLaw August 19, 2013 at 9:11 pm

      Sorry my bad, didn’t know I’d get my tags stripped 🙂 embed the topContent in the topContainer div’s and it should work.

  55. 65 chicken nesting boxes December 16, 2016 at 10:32 am

    If you desire to grow your familiarity just keep visiting this site and be updated with the newest news posted
    here.


  1. 1 YouTube unterstützt bald den IE6 nicht mehr | hack3r.de Trackback on July 14, 2009 at 7:40 pm
  2. 2 click here Trackback on October 15, 2014 at 1:45 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: