Home HTML CSS JavaScript jQuery ReactJS NodeJS About us Blogs Faqs

CSS Margins

The CSS Margin & Padding aspects of the Box Model will be discussed in this article, along with an example of how they are implemented.

CSS Margins: To add space around an element, use CSS margins. For each side, the margin sizes can be customized (top, right, bottom, left).

The following values can be assigned to margin properties:

  1. Length in centimeters, points, etc.
  2. % of the element's width.
  3. The browser's computed margin: auto.

Syntax

The following individual margin properties make up the shorthand property known as "margin":

  • margin-top: This property is used to specify an element's top margin.
  • margin-right: This property is used to specify the right margin for an element.
  • margin-bottom: This attribute is used to indicate how much space should be left at the bottom of an element.
  • margin-Left: This property is used to specify the size of the left-hand margin around the selected element.

The margin property permits negative values, as noted.

If the margin property has 4 values: 

margin: 40px 100px 120px 80px;

  • top = 40px
  • right = 100px
  • bottom = 120px
  • left = 80px

Example

Preview

If the margin property has 3 values: 

margin: 40px 100px;

  • top = 40px
  • right and left = 100px
  • bottom = 120px

Example

Preview

If the margin property has 2 values:

margin: 40px 100px;

  • top and bottom = 40px
  • right and left = 100px

Example

Preview

If the margin property has 1 values

margin: 30px;

  • top, right, bottom and left = 30px

Example

Preview

FAQs

In CSS, adjacent margins collapse into a single margin when they meet, which can sometimes lead to unexpected spacing. To avoid this behavior, you can collapse margins using the margin-collapse property. Setting margin-collapse: collapse on an element will collapse its vertical margins with the margins of its first and last child elements, effectively creating a single margin between them. You can also set margin-collapse: separate to prevent margins from collapsing. Note that horizontal margins never collapse, only vertical ones.

To center an element horizontally and vertically using margin in CSS, you can use the following code:

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

This code sets the position of the element to absolute, and then uses the top, left, and transform properties to center it both horizontally and vertically. The top and left properties position the top-left corner of the element in the center of its parent container, and the transform: translate(-50%, -50%) property moves the element up and to the left by 50% of its own width and height, effectively centering it.

To remove margins from an element in CSS, you can use the margin property and set its value to 0. For example, to remove all margins from a <div> element, you can use the following CSS code:

div {
  margin: 0;
}

Alternatively, you can set specific margins to 0 using the margin-top, margin-right, margin-bottom, and margin-left properties.