margin-block-end

Definition

The margin-block-end CSS property is used to set the size of the margin at the 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-end: 20px;
}

Setting the margin to a percentage of the parent element:

div {
  margin-block-end: 10%;
}

Setting the margin to different sizes for different breakpoints:

p {
  margin-block-end: 10px;

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

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

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