{"id":332297,"date":"2021-01-06T07:37:22","date_gmt":"2021-01-06T15:37:22","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=332297"},"modified":"2022-01-25T13:49:47","modified_gmt":"2022-01-25T21:49:47","slug":"margin-block","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin-block\/","title":{"rendered":"margin-block"},"content":{"rendered":"\n

margin-block<\/code> is a shorthand property in CSS that sets an element’s margin-block-start<\/code> and margin-block-end<\/code> values, both of which are logical properties<\/a>. It creates space around the element in the block direction, which is determined by the element’s writing-mode<\/a><\/code>, direction<\/a><\/code>, and text-orientation<\/a><\/code>.<\/p>\n\n\n\n

The property is part of the CSS Logical Properties and Values Level 1 specification<\/a> which is currently in Editor\u2019s Draft status. That means the definition and information about it can change between now and official recommendation. <\/p>\n\n\n\n

.element {\n  margin-block: 30px 60px;\n  writing-mode: vertical-rl; \/* Determines the block start direction *\/\n}<\/code><\/pre>\n\n\n\n\n\n\n\n
If the writing-mode<\/code> is set to horizontal-lr<\/code>, the margin-block<\/code> property will act just like setting margin-top<\/code> and margin-bottom<\/code>.<\/strong> One interesting aspect of this property is is that it is one of the logical properties that doesn’t have a one-to-one map with a non-logical property. There is no older property that sets both (and only) the block direction margins. <\/p>\n\n\n\n