CSS Margin and Padding

Margin and padding are two fundamental CSS properties that define the spacing between elements and within an element. Margin controls the outer space of the element, while padding controls the inner space between the content and the border.

The Basics of Margin and Padding

Margin is the outer spacing that separates an element from other elements. Padding is the inner spacing that lies between the content and the border. Both can be set individually or together.

In the following example, a <div> element receives margin and padding values, making the difference between outer and inner spacing clear:

Side-Specific Margin and Padding

Both margin and padding can be set individually for each side: top, right, bottom, and left. For example, <margin: 10px 20px 30px 40px;> sets different values for all four sides.

Centering with Margin

The <margin: 0 auto;> setting, when combined with a defined width, allows an element to be horizontally centered. This is a commonly used technique for centering containers.

Tips for Using Margin and Padding

Smartly setting margin and padding helps create clear and well-structured websites. Some useful tips:

• Use consistent spacing values to achieve a harmonious appearance.
• Avoid unnecessarily large margins, as they can create excessive empty space.
• Padding can improve readability by giving enough space between text and borders.