CSS margin and padding explanation

The easiest to understand diagram (box model)




Lamp for explaining css margin padding and border
img {
	margin: 90px;	
	border: 30px solid #222222;
	padding: 60px;
img {
	margin: 30px;	
	border: 10px solid #222222;
	padding: 20px;

In this example, the image is the content that has a 90px margin, 30px border and 60px padding.

What is the difference between padding and margin?

Padding and margin both create spaces surrounding the content. But what makes them different?

The padding creates space inside the content. And margin creates space outside of the content.

And border lives in between the padding & margin.

Difference between padding & margin
Difference between padding & margin

CSS Margins

The margin creates space outside of the content.

And CSS margins can share space with their neighbors (if needed or applicable). To demonstrate this behavior of CSS margins, I created 2 divs below.

The first div (yellow), has a 60px margin at the bottom.

And the second div (green), has a 60px margin at the top.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus, odit asperiores laboriosam ducimus. Voluptatibus facilis assumenda soluta, nam exercitationem aspernatur harum.
Recusandae praesentium ad, fugit ea sunt, tempora quod nulla accusamus asperiores vel id. Exercitationem veniam numquam, architecto non eos natus doloremque voluptatem.

So the total gap between these two divs (yellow & green) should be 120px because 60px + 60px = 120px. But in reality, it’s not the case. And these two divs shared the 60px space among each other.

That means the green (2nd) div shared 60px space from the yellow (1st) div’s bottom margin.

And the opposite is also true. That means the yellow (1st) div shared space from the green (2nd) div’s top margin.

The gap you see between these two divs (yellow & green) is only 60px and not 120px.


CSS margins do not affect the size of the content.

CSS margins do not affect the size of the content. Though the margin creates space outside of the content, there is a catch.

If the margin runs out of available space on the container, it (content) will exceed the viewport or container.

For example- you have a container that has a 600px width and it contains an image that is also 600px wide.

Now if you assign a 60px margin on the image, it will exceed or go outside of the container. Because there is no available space left for these 60px margins.

But if you assign a 60px padding instead of margins, the image will not go outside of the container. Rather the image will become smaller to hold the 60px padding. And it’s also applicable to border. The padding and the border behave the same way in the CSS box model.

Screenshot that I mentioned on the video (popular but wrong answer):

misconception about css box model

CSS borders

CSS border applies inside the content. That means the more border you add to content will become smaller.

Lamp for explaining css border

In this example- you have an image that has a 200px width and 200px height. Now if you add a 50px border to the image, it (image) will become 50px smaller from all 4 directions.

img {
	width: 200px;
	height: 200px;
	border: 50px solid #F70FE8;

In the above picture, it has a 200px width & height. And I added a 50px pink border to the image. By adding the border, the image became 150px in actual size (width & height). That means the border deducts space from the actual content.

CSS padding

The padding applies to the inside of the content (like the border). If you assign both padding & border to the content, then padding comes first and then border.

Paddings also have an effect on the content size (just like the border).

The actual content becomes smaller after you add padding.

Lamp for explaining css padding and border
img {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 50px solid #EA4335;

In this example- this is the same 200px image (width & height). But in this case, I added 30px padding (blue area) and the same 50px border (red area).

Now do you see the difference from above (previous) example?

Since I added 30px padding and 50px border to the image, so it became (30+50) = 80px smaller from all 4 directions.

If you’re wonder what is the actual size of the image at this point! It’s very simple-

width= 200px – (80px × 2) = 40px
height= 200px – (80px × 2) = 40px

That means, the actual size is 40px × 40px (after adding 30px padding and 50px border).

What are the differences among padding, margin & border?

The following picture (CSS box model) clearly shows the difference among padding, margin & border.

In the CSS box model, the blue box refers to the actual content that has margin, border & padding accordingly.

The pink area is the margin, the green rectangle is the actual border and the bread color area refers to the padding.

CSS box model
CSS Box Model

See also:

  1. CSS class versus id
  2. CSS Word Wrap Vs White Space
  3. How to Use Border in CSS
  4. CSS vertically center text
  5. How to center an image in CSS?

I hope it has cleared all your confusion about CSS margins vs padding, and also borders. Therefore, if you still have any questions, let me know if I can update the post with new information that has not been pointed out yet.