Margin

In CSS, the margin property refers to the outer margin of an element. It creates space between the margin of the element and surrounding elements.

Margins do not affect the actual size of the element.

margin is divided into four sub-properties.

• margin-top: Sets the top margin of an HTML element.

• margin-right: Sets the right margin of an HTML element.

• margin-bottom: Sets the bottom margin of an HTML element.

• margin-left: Sets the left margin of an HTML element.

Copy
div {
  margin-top: 10px; /* Top margin: 10px */
  margin-right: 20px; /* Right margin: 20px */
  margin-bottom: 10px; /* Bottom margin: 10px */
  margin-left: 20px; /* Left margin: 20px */
}

You can set the margins in all directions at once using just the margin property.

To set the margin in one direction, just input a single value for the margin property.

Copy
div {
  /* Set a 10px margin in all directions */
  margin: 10px;
}

To set vertical and horizontal margins, input two values in the margin property.

Copy
div {
  /* Top/bottom margins: 10px, left/right margins: 20px */
  margin: 10px 20px;
}

To set margins in all directions individually, input four values into the margin property.

Copy
div {
  /* Top, right, bottom, left margins: 10px, 20px, 30px, 40px */
  margin: 10px 20px 30px 40px;
}

margin: auto can be used to center HTML elements horizontally.

To horizontally center a block-level element (like a div), set a width for the element and set the margin property to 0 auto.

Copy
div {
  width: 100px; /* Set width */
  margin: 0 auto; /* Center horizontally */
}

Simply using margin: auto will not vertically center an HTML element. To vertically center elements, you will need to use layout techniques such as Flexbox or Grid, which are discussed later.