margin

Definition

The margin CSS property is used to set the outer spacing or margins of an element. It controls the space between an element’s border and adjacent elements or the containing element.

The margin property can accept one to four values, representing the top, right, bottom, and left margins, respectively. Each value can be specified using different length units (such as pixels or percentages) or the auto keyword.

Here’s an example:

.box {
  margin: 10px;
}

In this example, the .box class sets a margin of 10px on all sides of the element. This creates equal spacing between the element and its neighboring elements.

You can also specify different margins for each side individually:

.box {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 30px;
  margin-left: 15px;
}

In this case, the .box class sets a 20px top margin, 10px right margin, 30px bottom margin, and 15px left margin.

The margin property is commonly used to control the spacing around elements, creating gaps or separating elements within a layout. It helps achieve desired visual spacing and alignment in CSS designs.