CSS Positioning: Margin, Border, and Padding


MOVED

This content has been moved to my new blog at

http://petelepage.com/blog/2006/05/css-positioning-margin-border-and-padding/

Thanks,
PEte

Comments (7)

  1. wwfDev says:

    Hi,

    Nice sample, never too much on CSS!

    But isn’t the padding area included in the width-value? It seems so from your 2 first samples (the Lorem Ipsum ones). In the starting sample, the colored one, the width is said to apply to the content area only (not including the padding area), but the text (content) as displayed in your samples are surely not the same width.

    I’m not sure but this may also apply to the border (that the width covers the whole thing except margins)?

  2. Toby says:

    This is all very nice to know but I have a problem regarding this. IE and FF renders theese boxes differently. Specifically the one with both width and padding set.

    Does anyone have any good ideas as to how you should do a cross browser version of this simple thing?

    I want to be able to have a fixed outer width and use internal padding as it works in IE.

  3. I’ve wanted to create something like the above for my techs for a while, just had never gotten around to it, so I’m going to take advantage of this and forward it on to them. 🙂

    Something in CSS I always had an issue remembering was the order of setting different values for Margin, padding, etc.  Example, if I wanted to do 10 pixels on the top, 5 pixels on the right and left, and 15 pixels on the bottom, I would usually do the longer margin-top: 10px, margin-right: 5px;, margin-left: 5px; and margin-bottom: 15px;

    Until I realized it was done clockwise!  so a more concise version would be: Margin: 10px 5px 15px 5px (top, right, bottom, left), now I just visualize a clock and its simple. 🙂

  4. Jeremy H. says:

    The IE hack that I use to because IE 6 or lower and FF (or Safari) render the sizes differently is like this…

    #myDiv

    {

       width: 100; /*IE Width, this is the entire width you want */

       padding: 0px 20px 0px 20px;

    }

    html>body #myDiv

    {

       width: 60px /* width minus border, padding, margins */

    }

  5. Nick G says:

    VERY misleading article with incorrect explanations and demonstrations.

    For a start, it hasn’t even got a valid doctype specified, so the browsers are rendering in Quirks mode which is why none of the examples work properly. In fact the examples demonstrate the bugs in the ancient IE6 – and render differently in WORKING browsers such as Firefox, Safari and IE7.

    This article should be pulled before it confuses any more people.