margins

CSS Margin Properties

Basic Margin

The margin property creates space outside the border of an element. It can be set with specific values (px, em, %, etc.) or keywords like auto.

Example of Basic Margin: 20px on all sides

Individual Margin Sides

You can set margins on each side individually using margin-top, margin-right, margin-bottom, and margin-left.

Example of Top and Bottom Margins: 30px

Example of Left and Right Margins: 40px

Margin Shorthand

CSS allows you to set all four sides of a margin in one line with a shorthand property. The values are applied in the order: top, right, bottom, left.

margin: 10px 20px 30px 40px;

This sets 10px for top, 20px for right, 30px for bottom, and 40px for left.

Centering with Auto Margin

Setting margin: auto horizontally centers an element if it has a defined width.

Example of Centered Element with margin: auto

Negative Margins

Negative values can also be used for margins, which pull the element closer to surrounding elements.

Example: margin-top: -10px; would move the element 10 pixels up.

Using Percentages for Margins

You can set margin values in percentages, which are based on the width of the parent element. For example, margin: 5% would add 5% space relative to the parent’s width.