diff --git a/content/css/concepts/margins/terms/margin-block/margin-block.md b/content/css/concepts/margins/terms/margin-block/margin-block.md new file mode 100644 index 00000000000..588dc51cb92 --- /dev/null +++ b/content/css/concepts/margins/terms/margin-block/margin-block.md @@ -0,0 +1,20 @@ +# margin-block + +The `margin-block` CSS property defines the logical block-start and block-end margins of an element. It is used to control vertical spacing in writing modes where the block direction may vary, such as top-to-bottom or right-to-left layouts. + +## Syntax + +margin-block: ; +- ``: sets the margin at the start of the block (top in normal writing mode) +- ``: sets the margin at the end of the block (bottom in normal writing mode) + +## Example +``` +.box { + margin-block: 10px 20px; +} +``` +In this example, the `.box` element will have a 10px margin at the start of the block and a 20px margin at the end of the block. + +> [!NOTE] +> `margin-block` is a logical property and will adapt based on writing mode, unlike `margin-top` and `margin-bottom`. \ No newline at end of file