CSS In Depth Part 1: Margins, Padding & The Box Model

In the first of the CSS In depth series, we’ll be talking about margins, padding and the box model. Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility.

In this post, we’ll explain the difference between padding and margins, how the box model affects browsers and some tips and tricks dealing with cross-browser issues.

What are margins?

Beginning developers often use margins and padding interchangeably, but there’s actually a difference between the two.

Margins are the spaces around an element. In order for margins to work properly, the element must be floated or positioned relative. This style is often used to move the element it’s applied to, or to move other elements around it.

Margins

An element can have equal margins on all sides of it, which is simply written as:

element { margin: 5px; }

This gives an equal 5px to every side of an element. (Every element is a “block” or 4 sided square or rectable, regardless of its visible shape.) An element can also have different margins, or no margins at all on some or all of its sides. This can be written in the short-hand or long-hand style:

element { margin: 5px 10px 2px 4px; } /*margin: Top, Right, Bottom, Left*/
element { margin-left: 4px; margin-right: 10px; margin-top: 5px; margin-bottom: 2px; } /*if you don't want margins on a side, just leave it out of your CSS*/

Margins

There are a few IE issues with margins that probably cause most of all IE layout problems.

  • Double margins – The double margin bug in IE6 is probably the hardest bug developers struggle with. If any element is floated and has a margin in the same direction, IE6 will double that margin. So if you have an element that is floated left and also has a margin of 5px to the left, IE6 will give it a left margin of 10px.
  • Bottom margins – All IE versions like to ignore bottom margins, so it’s better to use padding for bottom spacing instead.

What is Padding?

Like margins, padding is the space around an element. However unlike margins, which deal with the space around the outside of an element, padding can affect either the outside or inside of an element.

Padding can also be written in the shorthand or longhand version of CSS:

element { padding: 10px; }
element { padding: 5px 10px 2px 4px; } /*padding: Top, Right, Bottom, Left*/
element { padding-left: 4px; padding-right: 10px; padding-top: 5px; padding-bottom: 2px; } /*if you don't want padding on a side, just leave it out of your CSS*/

The way padding is handled in the browser is called the box model. IE6+ (in standards mode), Firefox, Safari and Chrome all handle the calculations of padding the same, while versions of IE5 and lower calculate it completely different.

So how does the box model and padding work? Let’s say the element below is 100px in width and height.

padding

Now, let’s say we give it an equal padding of 10px because we have some nice text inside of it and we don’t want it touching the element’s edges. However as you can see below, the padding didn’t push the text inside the element, it just made the element itself bigger! This is when padding is most similar to margins, as it affects the outside of the element.

padding

This is where the idea of the box model comes in. Adding 10px of padding to an 100px element will increase its dimensions to 120px. (100px element + 10px top + 10px bottom = 120px).

So if we wanted to keep the element only 100px in height and width, but push the contents inside the element by 10px, we’d need to adjust the actual dimensions to 80px in height and width. Then our element would look like:

padding

Unlike margins, an element with padding does not need to be floated or positioned relatively for it to work, if it’s dealing with padding on the inside of the element. However, if you’re using padding to move the element (or another element around it), it does need to be floated or positioned.

IE5 and below calculate padding opposite of the rest of the browsers. IE5 simply assumes that when you apply padding, you want it affect the inside of the element. Therefor, if you gave an element of 100px a padding of 10px, it would simply push the inside contents 10px in, so there’s no need to adjust dimensions.

Plenty of space

Margins and padding can be tricky when dealing with cross-browser compatibility, but once you get the hang of it, it becomes much easier to anticipate the reactions of browsers.

Your Turn To Talk

I hope you enjoyed this first post of our CSS In Depth series. Stay tuned for the next part!

Of course feel free to chime in and leave a comment below :)

The In Depth CSS Series

Using 1Y0-A17 dumps fasten your success in real exam on first attempt. Our 642-446 training program includes the latest prep tools to help you secure your success in 650-177 exam.

Comments

  1. Mark Voss says

    Great article Amber – thanks.

    Spotted a typo though:

    “So if we wanted to keep the element only 100px in height and width, but push the contents inside the element by 10px, we’d need to adjust the actual dimensions to 90px in height and width.”

    Should be “we’d need to adjust the actual dimensions to 80px in height and width.”

  2. says

    Sorry, but your first paragraph about padding was confusing for me. I think we should remember margin and padding with respect to element/content border. margin effect outside of content border and padding effect inside of content border.

    I just goggled quickly and assembled some images here: http://saqibsarwar.com/images-to-understand-css-box-model/ for better understanding of css box model.

    Overall Nice effort amber. a good recall of css box model for me.

  3. Tiago says

    box-sizing

    now it is actually simpler to maintain a cross-browser implementation… if you set the box-sizing css attribute to border-box, then all browsers will treat padding the way that ie up to ie6 does…

  4. says

    When working with margin and padding it’s also important to make sure that IE doesn’t render in Quirks mode because that triggers the messed up box model (like IE5).
    Make sure the HTML makes IE render in Standard compliance mode, and you can save a lot of work.

  5. says

    To avoid strange dimensions when adding padding, you can also just add an empty div tag to primary one. Wrap it in a div, i mean. This keeps you from needing to constantly adjust width and height if you adjust your padding.

    Cheers

  6. gcarterIT says

    I think I understand padding be please confirm 2 things for me:

    1. adding padding will ALWAYS increase the size of the element, and I assume using a negative value for padding will decrease the element size.

    2. Borders and margins always start after the padding; or put another start way, after padding is added they start at the “new” element dimensions.

    Sounds correct?

    Thanks,
    George

  7. says

    @gcarterIT No, negative padding won’t decrease the size of the box, it’s not a valid input I believe, so it won’t do anything. You’re right about everything else though :)

  8. says

    Great article, I have been using css from 2-3yrs but wasn’t aware of the box model, though i used it every time.

    Amber, you explained it in a very simple way.

    Thanks. :)

  9. hybrid756 says

    Thanks for the really helpful post :)

    This is what I’m working on learning at the moment, so no doubt I’ll be coming back to read this again when my first attempts come out all screwy!

  10. says

    So is there a way to add padding to the left and right, but NOT the top and bottom?

    You cleared up a bunch of questions, just left me with this one!

  11. Vijju says

    Amazing tutorial. It really helped me to understand what CSS is exactly. Do keep up the good work. Will go through all your tutorials.
    Thanks!! You rock!!!

Trackbacks

  1. CSS In Depth: Margins, Padding & The Box Model…

    In the first of the CSS In depth series, we’ll be talking about margins, padding and the box model. Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility. In this pos…

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *