SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

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

March 8, 2010 by Amber Weinberg 35 Comments

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:

[html]
element { margin: 5px; }
[/html]

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:

[html]
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*/
[/html]

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:

[html]
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*/
[/html]

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

  • Part 1: Margins, Padding & the Box Model
  • Part 2: Floats & Positioning
  • Part 3: All About Text
  • Part 4: New CSS3 Styles

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.

Filed Under: CSS, Tutorial

Comments

  1. Mark Voss says

    March 8, 2010 at 4:56 am

    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. Jon Phillips says

    March 8, 2010 at 5:09 am

    @Mark: Thanks for the heads up, I just edited the post :)

  3. Alan says

    March 8, 2010 at 6:39 am

    Great wee article for beginnners of CSS, wish i had known all this when i started out.

  4. Skyrocket Labs says

    March 8, 2010 at 8:36 am

    That double margin issue makes me scream “Newman!” every time.

  5. Brendan says

    March 8, 2010 at 8:57 am

    This is one instance where I prefer the way IE6 does it…its box model makes so much more sense to me.

  6. Amberly | Web Designer says

    March 8, 2010 at 10:34 am

    Nice Read. Really Helpful for beginners.

  7. Mike Smith says

    March 8, 2010 at 10:49 am

    Nice read Amber. The damn IE margin issue is one that I think gave me my first gray hair :)

  8. saqib says

    March 8, 2010 at 12:11 pm

    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.

  9. Tiago says

    March 8, 2010 at 12:50 pm

    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…

  10. Kerem says

    March 8, 2010 at 1:00 pm

    Great post, wish there were this kind of posts when I was learning my lesson hard way :)
    Well done.

  11. Martin LeBlanc says

    March 8, 2010 at 1:25 pm

    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.

  12. Preston D Lee says

    March 8, 2010 at 1:26 pm

    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

  13. gcarterIT says

    March 8, 2010 at 3:32 pm

    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

  14. Amber Weinberg says

    March 8, 2010 at 4:59 pm

    @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 :)

  15. George says

    March 8, 2010 at 10:52 pm

    Thanks,

    That clears up alot of confusion.

  16. Arya Prakasa says

    March 8, 2010 at 11:07 pm

    Great post! Can’t wait to see Part 4: New CSS3 Styles

  17. Jordan Walker says

    March 9, 2010 at 10:14 am

    Well written article, I wondered why IE 6 would always kick extra space to a floated object. Guess you learn something new everyday. Thanks!

  18. Design Earth says

    March 16, 2010 at 3:06 pm

    Great article Amber – thanks

  19. Andy says

    March 17, 2010 at 5:27 am

    To fix the IE6 double margin bug just add display:inline to the floated elements style.

  20. Andy Griffiths says

    March 17, 2010 at 10:52 am

    Useful resource simply explained. Thanks

  21. Creative Nuts says

    March 17, 2010 at 1:48 pm

    nice tips :)

  22. Andre' says

    April 6, 2010 at 12:14 pm

    Nice article Amber

  23. Derrick Workman says

    April 7, 2010 at 7:26 pm

    Yea another great CSS article keep up the good work.

  24. Susheel Singh says

    April 13, 2010 at 2:31 pm

    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. :)

  25. hybrid756 says

    October 15, 2010 at 9:14 am

    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!

  26. Carolyn says

    October 26, 2010 at 5:40 pm

    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!

  27. Amber Weinberg says

    October 26, 2010 at 6:37 pm

    @Carolyn Yes you can do it long-hand { padding-left: 50px; padding-right: 30px; ) or shorthand { padding: 0 30px 0 50px; }

  28. Vijju says

    April 14, 2011 at 4:28 am

    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!!!

Leave a Reply

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

Please prove you're human *

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022