Defining Margin and Padding with CSS
Margins and paddings can be used without specifying directions such as top, left, right, and bottom.
1. Using a Single Value for Margin
When you specify a single value for the margin property, it applies the same margin to the top, right, bottom, and left directions.
Simply put, "the same margin is applied to all directions."
For example, margin: 10px applies an outer margin of 10px on all sides.
2. Using Two Values for Margin
When you specify two values for the margin property, the first value applies to the top and bottom margins, and the second value applies to the left and right margins.
For example, margin: 10px 20px; applies a margin of 10px to the top and bottom, and a margin of 20px to the left and right.
3. Using Three Values for Margin
When you specify three values for the margin property, the first value applies to the top margin, the second value applies to the left and right margins, and the third value applies to the bottom margin.
For example, margin: 10px 20px 30px; applies a margin of 10px to the top, 20px to the left and right, and 30px to the bottom.
4. Using Four Values for Margin
When you specify four values for the margin property, they apply to the top, right, bottom, and left margins in a clockwise direction.
For example, margin: 10px 20px 30px 40px; applies a margin of 10px to the top, 20px to the right, 30px to the bottom, and 40px to the left.
Want to learn more?
Join CodeFriends Plus membership or enroll in a course to start your journey.