Tillitsdone
down Scroll to discover

CSS margin-block-end Flexible Margin Management

CSS margin-block-end defines the logical block end margin of an element.

Useful for flexible layouts, it adapts to different writing modes and directions.

Options include length values, auto, inherit, initial, revert, revert-layer, and unset.
thumbnail

Introduction

The margin-block-end CSS property sets the logical block end margin of an element, adapting to the element’s writing mode, direction, and text orientation. It’s widely supported across devices and browsers since September 2021, making it a reliable tool for creating flexible and responsive layouts.

Baseline and Compatibility

The margin-block-end property is well-supported and works across many devices and browsers since September 2021. This makes it a reliable choice for developers and designers.

Description

The margin-block-end CSS property sets the logical block end margin of an element, which adjusts based on the element’s writing mode, direction, and text orientation. This property is particularly useful for multilingual websites or applications with varying text directions.

Syntax

margin-block-end: <length> | auto | inherit | initial | revert | revert-layer | unset;

Length Values

  • Absolute Lengths (e.g., 10px): Fixed units.
  • Relative Lengths (e.g., 1em, 5%): Relative to other elements or the viewport.

Keyword Values

  • auto: Automatically calculated by the browser.

Global Values

  • inherit: Inherits the margin from the parent element.
  • initial: Resets to the default value.
  • revert: Resets to the user agent’s default value.
  • revert-layer: Resets to the value specified in the next outer layer.
  • unset: Resets to its natural value.

Formal Definition

The margin-block-end property defines the logical block end margin of an element, adapting to the element’s writing mode, direction, and text orientation.

Initial Value

  • Initial Value: 0

Applies To

  • Applies To: All elements.

Inherited

  • Inherited: No

Percentages

  • Percentages: Depends on the layout model.

Computed Value

  • Computed Value: If specified as a length, the corresponding absolute length is used. If specified as a percentage, the specified value is used. Otherwise, the value is auto.

Animation Type

  • Animation Type: A length (interpolated as real, floating-point numbers).

Formal Syntax

margin-block-end = <length-percentage> | auto | <anchor-size()>
<length-percentage> = <length> | <percentage>
<anchor-size()> = anchor-size([<anchor-element>, <anchor-size>], <length-percentage>? )
<anchor-element> = <dashed-ident>
<anchor-size> = width | height | block | inline | self-block | self-inline

Examples

Here are some practical examples to illustrate the use of the margin-block-end property in CSS.

HTML

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

CSS

div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
margin-block-end: 20px;
background-color: #c8c800;
}

Description: Sets a bottom margin of 20px for the paragraph.

Vertical Writing Mode

<div>
<p class="exampleText">Example text</p>
</div>
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
margin-block-end: 20px;
background-color: #c8c800;
}

Description: Sets a bottom margin of 20px for the paragraph, adapting to vertical text orientation.

Auto Margin

<div>
<p class="exampleText">Auto margin example</p>
</div>
div {
background-color: lightblue;
width: 150px;
height: 150px;
}
.exampleText {
margin-block-end: auto;
background-color: #00ccff;
}

Description: Automatically calculates the margin size based on the element’s context.

Inherited Margin

<div class="parent">
<div class="child">Inherited margin example</div>
</div>
.parent {
margin-block-end: 30px;
background-color: lightgreen;
width: 150px;
height: 150px;
}
.child {
margin-block-end: inherit;
background-color: #90ee90;
}

Description: The child element inherits the margin-block-end value from its parent element.

Specifications

The margin-block-end property is part of the CSS Logical Properties and Values Level 1 specification.

Specification
CSS Logical Properties and Values Level 1 # margin-properties

Browser Compatibility

The margin-block-end property is widely supported across modern browsers.

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

Related Properties

These properties work together to manage margins in complex layouts. They are mapped to the physical margin properties:

Conclusion

The margin-block-end CSS property is a powerful tool for creating flexible and responsive layouts. It ensures that your web designs adapt seamlessly to different writing modes, directions, and text orientations. Whether you’re working on a new project or maintaining an existing one, margin-block-end is a crucial part of modern web design, allowing for more intuitive and accessible web experiences.

icons/css-4.svg CSS Blogs
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
css_property_cover/css-property-anchor-name.png CSS Anchor-Name Enhancing Web Layouts with Anchors Discover the CSS anchor-name property, a powerful tool for defining elements as anchors and creating dynamic, responsive web layouts. Learn about its use cases, available options, and how to effectively implement it in your projects. css_property_cover/css-property-font-variant-position.png CSS Font-Variant-Position Enhance Typography with Superscript and Subscript Discover the CSS font-variant-position property for controlling superscript and subscript glyphs. Learn about its use cases, available options like 'normal', 'sub', and 'super', and how to incorporate it into your web design projects for improved typography. css_property_cover/css-property-inset.png CSS Inset Simplify Element Positioning Learn how to use the CSS inset property to easily set the top, right, bottom, and left offsets of an element. Discover available options, examples, and browser compatibility. css_property_cover/css-property-inset-inline.png CSS Inset-Inline Master Element Positioning Discover the CSS inset-inline property for precise control over element positioning in the inline direction. Learn about available options, practical examples, and browser compatibility. css_property_cover/css-property-overflow-y.png CSS Overflow-y Managing Vertical Content Overflow Discover the CSS overflow-y property for managing vertical content overflow. Learn about its use cases, available options like visible, hidden, scroll, auto, and clip, and how to implement them effectively. css_property_cover/css-property-border-inline-width.png CSS border-inline-width Manage Logical Border Widths CSS border-inline-width lets you manage the width of logical inline borders for flexible and responsive designs. Use length values, keywords, and global values.
icons/logo-tid.svg

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?
Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!
🖐️ Contact us
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.