For experienced CSS developers this is a very simple topic. But this being a CSS for beginners section of Impressive Webs, I thought it would be good to address this topic as briefly and as effectively as possible for those just starting out.
What Are Margins?
Margins in CSS make up the vertical and horizontal areas between elements. If elements have no margins around them, they will bump right up against each other. Some elements have margins by default, so often even if you haven’t added a margin, you may still see one.
Here’s a visual demonstration of CSS margins:
It’s pretty simple. The space outside of, or between, elements is what comprises the margin areas. This area would also be outside of any borders set on elements.
I should point out there there could be other reasons for elements to have space between them — not just margins. But for the purpose of this simple post, we’ll just assume that all the vertical and horizontal space shown in that image is caused by margin settings.
Margins can be set using the margin property (which is shorthand, representing the four margin values for an element) or by the longhand margin-top, margin-right, margin-bottom, and margin-left properties. The order in shorthand is: top, right, bottom, left.
What is Padding?
So what about padding? Well, the padding of an element is the horizontal and vertical space that’s set around the content area of the targeted element. So padding is on the inside of a box, not the outside.
Here’s a visual demonstration of CSS padding:
In this example, there’s a single element with text centered within that element. The centering could be done in a number of ways. We’ll assume it’s done via the CSS padding property. So the padding is the area inside the element that separates the content of the element from the element’s edges. In this example, the element could be a paragraph tag (<p>).
Similar to margins, padding is set using the shorthand padding property, and can also be done using longhand: padding-top, padding-right, padding-bottom, and padding-left.
Summary
So, in brief, margins separate elements from each other and away from page edges, adding space outside of elements. Padding adds space inside of an element, separating the element’s content from the edges of the targeted element.
Hiya, I believe it’s always a very good idea to teach folk to avoid horizontal padding (although there are sensible ways to use it as with everything) and only to use vertical padding in one direction, that’s just the way I build things but I never run into box model / margin collapse issues.
Anyway, just a wee note ;)
horizontal padding is awesome. otherwise all text would be smashed up against its container’s border.
You can just use margin for the same effect.
Simply we can say margin will add space out of box and padding will add inside the box
What people always forget to mension is that horizontal padding adds to the width of the element ( div..). I think you should also mention this and give an example.
If we have a 100px box and add left and right paddings, both lets say 10px, then we have to change the width of the box to 80px ( 80px width + 20px padding = 100px ).
Nice article btw :)
You are right Stefan. But some time it make confuse to learner. Simply we can say margin will add space out of box and padding will add inside the box.
Thank you for posting this. I always forget that the padding adds to the div dimentions & then, when I am setting up my wireframes, I get my math all wrong and end up giving up on padding and going with like a million nested divs only using margin = not clean code. HORIZONTAL PADDING ADDS TO THE WIDTH OF DIVs.
Actually for the box use box-sizing: border-box and all the resizing problems go away
As I read somewhere else, box-sizing is my bread and butter ever since I found it. Boxes will remain the size you declared, no matter what.
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
NICE
It never hurts to have a reminder about padding and margins. They are two of the biggest display crushers for beginners
Hello,
I find out to new link of padding & margin in css.This link is very helpful related to padding & margin in css of php.This link as under….
http://www.phphunt.com/22/padding-and-margin-in-css
Thank you for this basic information. I was little confused about the two and struggling a bit when designing the layout of my site. But now everything should go smooth I guess!
Nice info!
to solve the problems of adding padding pixels in height and width, maybe could be uses box-sizing from css3 :)
Nice Information ideas got cleared as its always have revised info regarding padding and margin
Thanks for sharing
thank u so much for the info
ok ok, so then why do we need to be BOTH padding and margins?
The only use for having both that I can think of (and I am a complete newb) is so that you can have a border far away from a block of text using padding, and then use margins to stop that border from touching other elements.
But are there any other reasons or purposes for having both padding and margins?
With padding, you are able to space out the content from the edges of the box, inside the box. And yes, so as you mentioned, if there is a border, then the margin can separate the border from other elements, and padding can separate the border from the element’s content.
Also, when an element has a background color or background image, the background cannot cross over into the margin area, it can only cover the padding area (which it does by default). So that’s another reason. Once you get used to it, you’ll see that it’s very useful to have both.
It might help to use a site like CodePen or JS Bin to mess around with these things and see them live in action without having to create a real page.
Thanks man. =)
thanks a lot..
I am confuse about Difference Bitween margin & padding . please help me
read article and practice to visualize things
thanks good one
please explain the padding concept clearly.
Thanks a lot for this informative guide. I was confuse about margin and padding. Now my mind in clear about both.
Best description of the difference between them on Internet.
short yet well explained. Thanks for this article.
Thanks a lot for the article.
This post appears the clearest explanation I have read on this topic. Thanks for the post