[CSS] Margin / Border / Padding

About 22 years ago, when I first learned CSS, this concept was difficult to me.

I will explain this for someone who is unfamiliar with this concept like me at that time.

 

Overview

First of all, I will show you a figure.

This is a concept figure of margin, border and padding.

The inner area including the border is the size of the element.

However the size of element expand with border width, so you need to pay attention for using it.

Margin

The margin is a space between elements.

margin: <top and right and left and bottom>
margin: <top and bottom> <right and left>
margin: <top> <right and left> <bottom>
margin: <top> <right> <bottom> <left>

You can easily remember this as clockwise.

Border

The border is a border of an element.

border: <border-width> <border-style> <border-color>

.box {
  border: 1px solid black;
}

You can easily understand with this figure.

I will show you more examples with codes.

.box {
  border: thick dotted rgba(0, 0, 0, 0.7);
  border: medium dashed blue;
  border: 10px double green;
  border: .5em groove violet;
  border: .7rem ridge red;
  border: .5rem inset goldenrod;
  border: .5rem outset skyblue;
}

The thin value is hard to see, so I didn't use it.

Padding

The padding is a space between container and its content.

padding: <top and right and left and bottom>
padding: <top and bottom> <right and left>
padding: <top> <right and left> <bottom>
padding: <top> <right> <bottom> <left>