Defining Margin and Padding in CSS

Margins and paddings can be used without specifying directions like top, left, right, or bottom.

When you specify a single value for the margin property, a margin of 10 pixels is applied in all directions: top, right, bottom, and left.

You can simply think, "Apply the same margin to all sides."

For instance, margin: 10px applies an outer margin of 10 pixels in all directions.

When you specify two values for the margin property, the first value is applied to the top and bottom margins, and the second value is applied to the left and right margins.

For example, margin: 10px 20px; applies a margin of 10 pixels on the top and bottom, and a margin of 20 pixels on the left and right.

When you specify three values for the margin property, the first value is applied to the top, the second value is applied to the left and right margins, and the third value is applied to the bottom.

For example, margin: 10px 20px 30px; applies a margin of 10 pixels on the top, 20 pixels on the left and right, and 30 pixels on the bottom.

When you specify four values for the margin property, they are applied in a clockwise direction to the top, right, bottom, and left margins, respectively.

For example, margin: 10px 20px 30px 40px; applies a margin of 10 pixels to the top, 20 pixels to the right, 30 pixels to the bottom, and 40 pixels to the left.