Skip to content

Commit ce18766

Browse files
committed
Update margin utilities docs for v6 spacers
Docs updated to reflect the v6 spacing scale: sizes now range from 0 through 9 (`.m-0`–`.m-9`) and the multiplier values for sizes 3–9 were adjusted. Negative margin docs were changed to note that v6 only supports negative inline margins (`.ms--1`, `.me--2`) using `-1` and `-2` spacers and that the v5-style full negative utilities (e.g. `.mt-n1`) were removed. The responsive examples were updated to list `.{breakpoint}m-0` through `.{breakpoint}m-9` and `.{breakpoint}m-auto`.
1 parent 0516358 commit ce18766

1 file changed

Lines changed: 15 additions & 12 deletions

File tree

site/src/content/docs/utilities/margin.mdx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { getData } from '@libs/data'
1717

1818
## Overview
1919

20-
Use margin utilities to control the outer space around elements. Margin utilities are built from a default Sass map ranging from `.25rem` to `3rem`. Use utilities like `.m-3` and `.m-5` to control the margin on all sides of an element:
20+
Use margin utilities to control the outer space around elements. Margin utilities are built from a default Sass map ranging from `0` to `3rem` (`.m-0` through `.m-9`). Use utilities like `.m-3` and `.m-5` to control the margin on all sides of an element:
2121

2222
<Example class="d-flex align-items-center justify-content-center gap-4 text-center" showMarkup={false} code={`
2323
<div class="bd-pattern-diagonal rounded-3">
@@ -65,9 +65,13 @@ Where *size* is one of:
6565
- `0` - for classes that eliminate the `margin` by setting it to `0`
6666
- `1` - (by default) for classes that set the `margin` to `$spacer * .25`
6767
- `2` - (by default) for classes that set the `margin` to `$spacer * .5`
68-
- `3` - (by default) for classes that set the `margin` to `$spacer`
69-
- `4` - (by default) for classes that set the `margin` to `$spacer * 1.5`
70-
- `5` - (by default) for classes that set the `margin` to `$spacer * 3`
68+
- `3` - (by default) for classes that set the `margin` to `$spacer * .75`
69+
- `4` - (by default) for classes that set the `margin` to `$spacer`
70+
- `5` - (by default) for classes that set the `margin` to `$spacer * 1.25`
71+
- `6` - (by default) for classes that set the `margin` to `$spacer * 1.5`
72+
- `7` - (by default) for classes that set the `margin` to `$spacer * 2`
73+
- `8` - (by default) for classes that set the `margin` to `$spacer * 2.5`
74+
- `9` - (by default) for classes that set the `margin` to `$spacer * 3`
7175
- `auto` - for classes that set the `margin` to auto
7276

7377
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
@@ -168,24 +172,23 @@ Bootstrap includes an `.mx-auto` class for horizontally centering fixed-width bl
168172

169173
## Negative margin
170174

171-
In CSS, `margin` properties can utilize negative values (`padding` cannot). These negative margins are **disabled by default**, but can be enabled in Sass by setting `$enable-negative-margins: true`.
175+
In CSS, `margin` properties can utilize negative values (`padding` cannot). In v6, negative margins are limited to `margin-inline-start` and `margin-inline-end` only, using spacers `-1` (`-0.25rem`) and `-2` (`-0.5rem`):
172176

173-
The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here’s an example class that’s the opposite of `.mt-1`:
174-
175-
```scss
176-
.mt-n1 {
177-
margin-top: -0.25rem !important;
178-
}
177+
```html
178+
<div class="ms--1">.ms--1</div>
179+
<div class="me--2">.me--2</div>
179180
```
180181

182+
The v5 full negative margin utilities across all sides (like `.mt-n1`) have been removed.
183+
181184
## Responsive
182185

183186
All margin utilities are responsive and include all breakpoints.
184187

185188
<ul>
186189
{getData('breakpoints').map((breakpoint) => {
187190
return (
188-
<li><code>.{breakpoint.abbr}m-0</code> through <code>.{breakpoint.abbr}m-5</code> and <code>.{breakpoint.abbr}m-auto</code></li>
191+
<li><code>.{breakpoint.abbr}m-0</code> through <code>.{breakpoint.abbr}m-9</code> and <code>.{breakpoint.abbr}m-auto</code></li>
189192
)
190193
})}
191194
</ul>

0 commit comments

Comments
 (0)