diff --git a/files/en-us/web/css/margin-block/index.html b/files/en-us/web/css/margin-block/index.html index 4e76630578160df..288f6d1563358ed 100644 --- a/files/en-us/web/css/margin-block/index.html +++ b/files/en-us/web/css/margin-block/index.html @@ -29,7 +29,7 @@ margin-block: unset; -
These values corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or {{CSSxRef("margin-right")}}, and {{CSSxRef("margin-left")}} property depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.
+This property corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or the {{CSSxRef("margin-right")}} and {{CSSxRef("margin-left")}} properties, depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.
<div> - <p class="exampleText">Example text</p> -</div> --
div { background-color: yellow; width: 120px; - height: 120px; + height: auto; + border: 1px solid green; } -.exampleText { - writing-mode: vertical-rl; +p { + margin: 0; margin-block: 20px 40px; - background-color: #c8c800; + background-color: tan; +} + +.verticalExample { + writing-mode: vertical-rl; }+
<div> + <p>Example text</p> +</div> +<div class="verticalExample"> + <p>Example text</p> +</div> ++
{{EmbedLiveSample("Setting_block_start_and_end_margins", 140, 140)}}
+{{EmbedLiveSample("Setting_block_start_and_end_margins", 140, 200)}}
This property corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or {{CSSxRef("margin-right")}}, and {{CSSxRef("margin-left")}} properties, depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.
+This property corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or the {{CSSxRef("margin-right")}} and {{CSSxRef("margin-left")}} properties, depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.
<div> - <p class="exampleText">Example text</p> -</div> --
div { background-color: yellow; width: 120px; - height: 120px; + height: auto; + border: 1px solid green; } -.exampleText { - writing-mode: vertical-rl; +p { + margin: 0; margin-inline: 20px 40px; - background-color: #c8c800; + background-color: tan; +} + +.verticalExample { + writing-mode: vertical-rl; }+
<div> + <p>Example text</p> +</div> +<div class="verticalExample"> + <p>Example text</p> +</div> ++
{{EmbedLiveSample("Setting_inline_start_and_end_margins", 140, 140)}}
+{{EmbedLiveSample("Setting_inline_start_and_end_margins", 140, 240)}}