margin-block

Definition

The margin-block CSS shorthand property is used to set the margin at the top and bottom of an element in the block direction. The block direction is the direction in which content flows in a document (usually top-to-bottom in Western languages).

Examples

Setting the margin to a fixed size:

p {
  margin-block: 20px;
}

Setting the margin to different sizes for the top and bottom:

div {
  margin-block: 10px 20px;
}

Setting the margin to different sizes for different breakpoints:

p {
  margin-block: 10px 20px;

  @media screen and (min-width: 768px) {
    margin-block: 20px 40px;
  }

  @media screen and (min-width: 1024px) {
    margin-block: 30px 60px;
  }
}

Values

Best Practices

• Use this property to add spacing between elements in the block direction.
• Avoid setting the margin too large or too small, as it can affect the readability and usability of your content.
• Use percentage values instead of fixed pixel values for responsive designs that need to adapt to different screen sizes.
• Use the auto value sparingly, as it can sometimes produce unexpected results.
• Test your styles in different browsers to ensure cross-browser compatibility.

Browser Compatibility