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.
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]
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.
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.
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:
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.
Author: Amber Weinberg
Amber is a freelancer with over 10 years of experience and specializes in clean, semantic and valid 1.0 Strict XHTML, CSS and WordPress development. She also writes a web development blog on her portfolio at www.amberweinberg.com.
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.”
@Mark: Thanks for the heads up, I just edited the post :)
Great wee article for beginnners of CSS, wish i had known all this when i started out.
That double margin issue makes me scream “Newman!” every time.
This is one instance where I prefer the way IE6 does it…its box model makes so much more sense to me.
Nice Read. Really Helpful for beginners.
Nice read Amber. The damn IE margin issue is one that I think gave me my first gray hair :)
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.
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…
Great post, wish there were this kind of posts when I was learning my lesson hard way :)
Well done.
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.
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
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
@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 :)
Thanks,
That clears up alot of confusion.
Great post! Can’t wait to see Part 4: New CSS3 Styles
Well written article, I wondered why IE 6 would always kick extra space to a floated object. Guess you learn something new everyday. Thanks!
Great article Amber – thanks
To fix the IE6 double margin bug just add display:inline to the floated elements style.
Useful resource simply explained. Thanks
nice tips :)
Nice article Amber
Yea another great CSS article keep up the good work.
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. :)
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!
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!
@Carolyn Yes you can do it long-hand { padding-left: 50px; padding-right: 30px; ) or shorthand { padding: 0 30px 0 50px; }
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!!!