CSS margin-block-start A Flexible Layout Tool

Introduction

The margin-block-start CSS property defines the logical block start margin of an element, based on its writing mode, directionality, and text orientation. Available since September 2021, this property is widely supported across many devices and browser versions.

Browser Compatibility

The margin-block-start CSS property is well-supported across many devices and browser versions. It has been available since September 2021.

Here are the browsers that support the margin-block-start property:

• Google Chrome 87+
• Microsoft Edge 87+
• Mozilla Firefox 41+
• Opera 73+
• Safari 12.1+

Syntax

The margin-block-start CSS property defines the logical block start margin of an element. Here’s how you can use it:

/* <length> values */
margin-block-start: 10px; /* An absolute length */
margin-block-start: 1em;  /* Relative to the text size */
margin-block-start: 5%;   /* Relative to the nearest block container's width */

/* Keyword values */
margin-block-start: auto;

/* Global values */
margin-block-start: inherit;
margin-block-start: initial;
margin-block-start: revert;
margin-block-start: revert-layer;
margin-block-start: unset;

Explanation

• <length> values: You can specify the margin using absolute lengths (px, cm) or relative lengths (em, %).
  • margin-block-start: 10px; sets a fixed margin of 10 pixels.
  • margin-block-start: 1em; sets a margin relative to the text size.
  • margin-block-start: 5%; sets a margin relative to the nearest block container’s width.
• Keyword values:
  • margin-block-start: auto; allows the browser to determine the appropriate margin.
• Global values:
  • margin-block-start: inherit; inherits the margin from the parent element.
  • margin-block-start: initial; sets the margin to its default value.
  • margin-block-start: revert; reverts the margin to the user agent’s default stylesheet.
  • margin-block-start: revert-layer; reverts the margin to the value specified in the next lower cascade layer.
  • margin-block-start: unset; resets the margin to its natural value, which means it behaves like initial if the property is not inherited, or inherit if it is.

Values

The margin-block-start property accepts various values to control the logical block start margin of an element. These values can be specified as lengths, percentages, or keywords, offering flexibility in how you define the margin.

Here are the different types of values you can use:

• Length values:
  • Absolute lengths: Specified in units like px, cm, or pt.
    • Example: margin-block-start: 10px;
  • Relative lengths: Specified in units like em, which are relative to the text size.
    • Example: margin-block-start: 1em;
  • Percentages: Specified as a percentage of the nearest block container’s width.
    • Example: margin-block-start: 5%;
• Keyword values:
  • auto: Allows the browser to determine the appropriate margin based on the context.
    • Example: margin-block-start: auto;
• Global values:
  • inherit: Inherits the margin from the parent element.
    • Example: margin-block-start: inherit;
  • initial: Sets the margin to its default value.
    • Example: margin-block-start: initial;
  • revert: Reverts the margin to the user agent’s default stylesheet.
    • Example: margin-block-start: revert;
  • revert-layer: Reverts the margin to the value specified in the next lower cascade layer.
    • Example: margin-block-start: revert-layer;
  • unset: Resets the margin to its natural value, which means it behaves like initial if the property is not inherited, or inherit if it is.
    • Example: margin-block-start: unset;

Examples

Example 1: Setting a fixed margin

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-block-start: 20px;
  background-color: #c8c800;
}

Example 2: Using the auto keyword

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-block-start: auto;
  background-color: #c8c800;
}

Specifications

The margin-block-start property is part of the CSS Logical Properties and Values specification, which aims to provide more intuitive and flexible ways to manage layouts in CSS. This specification helps developers create responsive designs that adapt to different writing modes, directions, and text orientations.

The margin-block-start property is defined in the following specification:

• CSS Logical Properties and Values Level 1
  • CSS Logical Properties and Values Level 1 - margin properties

Related Properties

The margin-block-start property is part of a broader set of CSS logical properties that help manage layouts in a more intuitive and flexible way. These properties are designed to adapt to different writing modes, directions, and text orientations, making them invaluable for creating responsive and accessible web designs. Here are some related properties that work in conjunction with margin-block-start:

1. margin-block-end:

   • Defines the bottom margin in horizontal writing and top margin in vertical writing.
   • Learn more about margin-block-end

2. margin-inline-start:

   • Defines the left margin in left-to-right writing and right margin in right-to-left writing.
   • Learn more about margin-inline-start

3. margin-inline-end:

   • Defines the right margin in left-to-right writing and left margin in right-to-left writing.
   • Learn more about margin-inline-end

4. Margins:

   • margin-top: Top margin.
   • margin-right: Right margin.
   • margin-bottom: Bottom margin.
   • margin-left: Left margin.
   • Learn more about margin-top
   • Learn more about margin-right
   • Learn more about margin-bottom
   • Learn more about margin-left

5. writing-mode:

   • Sets the text flow direction, such as horizontal-tb or vertical-rl.
   • Learn more about writing-mode

6. direction:

   • Sets text direction: ltr (left-to-right) or rtl (right-to-left).
   • Learn more about direction

7. text-orientation:

   • Sets text orientation: mixed, upright, or sideways.
   • Learn more about text-orientation

Using these properties, you can create flexible and user-friendly web designs. Whether it’s a simple blog or a complex app, these tools help you make visually appealing and adaptable layouts.