From 1f32798316d962471cecfb2fc91a63cc33faf478 Mon Sep 17 00:00:00 2001 From: dzevad-cyber Date: Tue, 24 Feb 2026 15:54:43 +0100 Subject: [PATCH 1/4] feat(css): add new term for margin-block property --- .../terms/margin-block/margin-block.md | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 content/css/concepts/margins/terms/margin-block/margin-block.md 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..4d0544510f3 --- /dev/null +++ b/content/css/concepts/margins/terms/margin-block/margin-block.md @@ -0,0 +1,63 @@ +--- +Title: 'margin-block' +Description: 'margin-block property defines margin at the start and end of an element.' +Subjects: + - 'Web Development' + - 'Web Design' +Tags: + - 'Margin' + - 'Box Model' + - 'Positioning' +CatalogContent: + - 'learn-css' +--- + +Defines margin at the start and end of an element. It depends on the block direction. + +## Syntax + +```css +margin-bottom: ; +margin-bottom: ; +``` + +If there is only one value, that value is used for start and end margins for an element. +If there are two values, represents start margin and represents end margin. + +`` can be one of the following: + +- Length: `20px` `-20%` +- Percentage: `5%` `-5%` + +**Note:** Values provided may be negative. To specify start and end margin direction use `writing-mode` property. + +## Example 1 + +Sets the start and end margin: + +```css +h1 { + margin-block: 20px; +} +``` + +## Example 2 + +Sets the start margin to `5%` and end margin `-10px`: + +```css +h1 { + margin-block: 5% -10px; +} +``` + +## Example 3 + +Sets right margin to `10px` and left margin to `20px` + +```css +h1 { + margin-block: 10px 20px; + writing-mode: vertical-rl; +} +``` From a72782584a9348875faea6e4b05ebbf307921a5b Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Wed, 25 Feb 2026 11:59:57 +0530 Subject: [PATCH 2/4] Revise margin-block documentation Updated the description and examples for clarity and accuracy. --- .../terms/margin-block/margin-block.md | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/content/css/concepts/margins/terms/margin-block/margin-block.md b/content/css/concepts/margins/terms/margin-block/margin-block.md index 4d0544510f3..6cfaf8021c0 100644 --- a/content/css/concepts/margins/terms/margin-block/margin-block.md +++ b/content/css/concepts/margins/terms/margin-block/margin-block.md @@ -1,39 +1,37 @@ --- Title: 'margin-block' -Description: 'margin-block property defines margin at the start and end of an element.' +Description: 'Sets the margins on the block-start and block-end sides of an element.' Subjects: - 'Web Development' - 'Web Design' Tags: - - 'Margin' - 'Box Model' + - 'Margin' - 'Positioning' CatalogContent: - 'learn-css' + - 'paths/front-end-engineer-career-path' --- -Defines margin at the start and end of an element. It depends on the block direction. +The **`margin-block`** property sets the margins on the block-start and block-end sides of an element, controlling vertical spacing based on the writing mode and text direction. ## Syntax -```css -margin-bottom: ; -margin-bottom: ; +```pseudo +margin-block: ; ``` -If there is only one value, that value is used for start and end margins for an element. -If there are two values, represents start margin and represents end margin. +**Parameters:** -`` can be one of the following: +- ``: Specifies the margin size for block-start and block-end. Can be a length (`px`, `em`, `rem`), percentage (`%`), `auto`, or global values (`inherit`, `initial`, `unset`, `revert`). -- Length: `20px` `-20%` -- Percentage: `5%` `-5%` +**Return value:** -**Note:** Values provided may be negative. To specify start and end margin direction use `writing-mode` property. +None. Sets a layout style on the element; it does not return a value. ## Example 1 -Sets the start and end margin: +The following example sets the start and end margin: ```css h1 { @@ -43,7 +41,7 @@ h1 { ## Example 2 -Sets the start margin to `5%` and end margin `-10px`: +The following example sets the start margin to `5%` and end margin `-10px`: ```css h1 { @@ -53,11 +51,11 @@ h1 { ## Example 3 -Sets right margin to `10px` and left margin to `20px` +The following example demonstrates block margins in vertical writing mode: ```css h1 { margin-block: 10px 20px; - writing-mode: vertical-rl; + writing-mode: vertical-rl; /* block-start is top, block-end is bottom in vertical mode */ } ``` From b583c3d11c6dcb3b12ac08076beeea3857cb59ed Mon Sep 17 00:00:00 2001 From: dzevad-cyber Date: Wed, 25 Feb 2026 14:29:32 +0100 Subject: [PATCH 3/4] feat(css:media): add images for the margin-block examples --- .../margins/terms/margin-block/margin-block.md | 12 ++++++++++++ media/margin-block-example-1.png | Bin 0 -> 1273 bytes media/margin-block-example-2.png | Bin 0 -> 1268 bytes media/margin-block-example-3.png | Bin 0 -> 1242 bytes 4 files changed, 12 insertions(+) create mode 100644 media/margin-block-example-1.png create mode 100644 media/margin-block-example-2.png create mode 100644 media/margin-block-example-3.png diff --git a/content/css/concepts/margins/terms/margin-block/margin-block.md b/content/css/concepts/margins/terms/margin-block/margin-block.md index 6cfaf8021c0..c10810009ca 100644 --- a/content/css/concepts/margins/terms/margin-block/margin-block.md +++ b/content/css/concepts/margins/terms/margin-block/margin-block.md @@ -39,6 +39,10 @@ h1 { } ``` +This will display: + +![margin-block-example-1](../../../../../../media/margin-block-example-1.png) + ## Example 2 The following example sets the start margin to `5%` and end margin `-10px`: @@ -49,6 +53,10 @@ h1 { } ``` +This will display: + +![margin-block-example-2](../../../../../../media/margin-block-example-2.png) + ## Example 3 The following example demonstrates block margins in vertical writing mode: @@ -59,3 +67,7 @@ h1 { writing-mode: vertical-rl; /* block-start is top, block-end is bottom in vertical mode */ } ``` + +This will display: + +![margin-block-example-3](../../../../../../media/margin-block-example-3.png) diff --git a/media/margin-block-example-1.png b/media/margin-block-example-1.png new file mode 100644 index 0000000000000000000000000000000000000000..c81168b4f2e471f5facdd55d4cf1121a2b05a8e3 GIT binary patch literal 1273 zcmeAS@N?(olHy`uVBq!ia0y~yVDtxKI}SFG$mU7YfD}uylV=DA5Y%v_bO5;s(;>wZ@3IU=A3gUWyW^6rc`JCZ_YJHeK zLxKAvPJs?}2ZebIjTKBRaL&QHn@irm-4w`>|MmNy{N@-mX%w{>oa?rp<%hoIe`Pyx z_ssgO_sc7h48~9lw{kGaY*-(c&|~=Q`YT?BxW}JZIF1M_2>3TR*f27EB*3}xY)Z{RJy{|LqHX2+FB_AV1EvFWz_CJ^)!__zX{F|*=^b1#(DyiEFVg{U o(!6kcPVu@prU!Yrb$yV(uCDSpP2=-5U|GiC>FVdQ&MBb@0QBvWi2wiq literal 0 HcmV?d00001 diff --git a/media/margin-block-example-2.png b/media/margin-block-example-2.png new file mode 100644 index 0000000000000000000000000000000000000000..793ce00a43f92bf1dc567c2b1215266dc7f6ed1d GIT binary patch literal 1268 zcmeAS@N?(olHy`uVBq!ia0y~yVDtxKI}SFG$mU7YfD}uylV=DA5Y%v_bO5=lJzX3_ zD(1YsdocI5gMh=u)C22^%DOzdIAeQaTY~Q_W2;@eLG42v<6+BM9)$^3&*l^}e3&4= zTbyBs@<$eqBf<&-{tXT`j7)IOgBY`ypCin;9xSc1|DQMEG^Pp^iVRw0&=D_mLE(*t~!x)eH({ zO~v1tl6wsAm*q2jkeH5~;&gr=eDU}B)+~_&-hX2a4nHL&L4MHvclgDwb$7KH%s20r z)v6E*A2N2Y7q;vqe6FprV zLn`LHy>l@4wu68}pix4$pP;AVqOQU&k1px?%zv8Kdc|1?s-5pZZrZCct_q1)SX zZ-1}-%64G$&%ZlrcH#<2EM{4R=@;<-o_|%EVf(D`BCrIMF@onbJXt}uc*Q?(%eGr&_`sv~Pm_7#Lv;tGVjCR|+=R1>hJ{+;z zElrBG$T^2-+u(VPzB-O~Eqq?NPJ;VG9w|Nq2JBUDh8k0%_2fToS9$3syFCV2STT6I L`njxgN@xNAZmMBm literal 0 HcmV?d00001 From b3047e77a997cbe4ea891f7d756e455791b3252e Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Thu, 26 Feb 2026 11:49:40 +0530 Subject: [PATCH 4/4] Fix image links in margin-block.md Updated image links to use absolute URLs for margin block examples. --- .../css/concepts/margins/terms/margin-block/margin-block.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/css/concepts/margins/terms/margin-block/margin-block.md b/content/css/concepts/margins/terms/margin-block/margin-block.md index c10810009ca..4e7d4756755 100644 --- a/content/css/concepts/margins/terms/margin-block/margin-block.md +++ b/content/css/concepts/margins/terms/margin-block/margin-block.md @@ -41,7 +41,7 @@ h1 { This will display: -![margin-block-example-1](../../../../../../media/margin-block-example-1.png) +![margin-block-example-1](https://raw.githubusercontent.com/Codecademy/docs/main/media/margin-block-example-1.png) ## Example 2 @@ -55,7 +55,7 @@ h1 { This will display: -![margin-block-example-2](../../../../../../media/margin-block-example-2.png) +![margin-block-example-2](https://raw.githubusercontent.com/Codecademy/docs/main/media/margin-block-example-2.png) ## Example 3 @@ -70,4 +70,4 @@ h1 { This will display: -![margin-block-example-3](../../../../../../media/margin-block-example-3.png) +![margin-block-example-3](https://raw.githubusercontent.com/Codecademy/docs/main/media/margin-block-example-3.png)