{"id":332403,"date":"2021-01-08T13:20:23","date_gmt":"2021-01-08T21:20:23","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=332403"},"modified":"2021-01-15T12:37:28","modified_gmt":"2021-01-15T20:37:28","slug":"margin-block-start","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin-block-start\/","title":{"rendered":"margin-block-start"},"content":{"rendered":"\n

The margin-block-start<\/code> property in CSS defines the amount of space along the outer starting edge of an element in the block direction. It’s included in the CSS Logical Properties Level 1 specification<\/a>, which is currently in Working Draft.<\/p>\n\n\n\n

.element {\n  margin-block-start: 25%;\n  writing-mode: vertical-lr;\n}<\/code><\/pre>\n\n\n\n
The starting edge in the block direction is determined by the element’s writing-mode<\/code>, direction<\/code> and text-orientation<\/code>. So, when using margin-block-start<\/code> in a horizontal left-to-right context, it acts just like margin-top<\/code> as the starting edge of the element is the top of it.<\/p>\n\n\n\n
But if we change the writing-mode<\/code> to, say, vertical, the element is rotated, placing the starting edge toward the left. As a result, margin-block-start<\/code> behaves just like margin-left<\/code>. Basically, the starting edge is relative to the direction it flows. That’s what we mean when talking about “logical” properties.<\/p>\n\n\n
Syntax<\/h3>\n\n\n
margin-block-start: <\u2018margin-top\u2019><\/code><\/pre>\n\n\n\n
It’s kinda weird to see the syntax of one property reference the syntax of another CSS property right in the documentation, but that’s really what it is. What it’s basically trying to say is that the property accepts the same values as margin-top<\/code> which follows this syntax:<\/p>\n\n\n\n
margin-top: <length> | <percentage> | auto;<\/code><\/pre>\n\n\n\n
  • Initial value:<\/strong> 0<\/code><\/li>
  • Applies to:<\/strong> all elements except internal table elements, ruby base containers, and ruby annotation containers<\/li>
  • Inherited:<\/strong> no<\/li>
  • Percentages:<\/strong> as for the corresponding physical property<\/li>
  • Computed value:<\/strong> same as corresponding margin-*<\/code> properties<\/li>
  • Animation type:<\/strong> by computed value type<\/li><\/ul>\n\n\n
    Values<\/h3>\n\n\n
    margin-block-start<\/code> accepts a single length or keyword value.<\/p>\n\n\n\n
    \/* Length values *\/\nmargin-block-start: 20px;\nmargin-block-start: 2rem;\nmargin-block-start: 25%;\n\n\/* Keyword values *\/\nmargin-block-start: auto;\n\n\/* Global values *\/\nmargin-block-start: inherit;\nmargin-block-start: initial;\nmargin-block-start: unset;<\/code><\/pre>\n\n\n
    Demo<\/h3>\n\n\n
    Click the button in the following demo to see how the starting edge of the element changes with the writing-mode<\/code>.<\/p>\n\n\n\n