1. css
  2. /properties
  3. /margin-block



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).


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;


<length>Specifies a fixed size in pixels, ems, or other supported length units
<percentage>Specifies a percentage of the parent element
autoThe browser calculates the margin

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera