Skip to content

Commit 90869a5

Browse files
Add margin-inline tip
1 parent 4d0dbac commit 90869a5

File tree

1 file changed

+23
-0
lines changed

1 file changed

+23
-0
lines changed

README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ A collection of tips to help take your CSS skills pro.
4646
1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events)
4747
1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing)
4848
1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements)
49+
1. [Use `margin-inline` instead of `margin`](#use-margin-inline-instead-of-margin)
4950

5051
### Use a CSS Reset
5152

@@ -675,6 +676,28 @@ Current versions of Chrome, Firefox, Safari, and Edge.
675676

676677
<sup>[Back to top](#table-of-contents)</sup>
677678

679+
### Use `margin-inline` instead of `margin`
680+
681+
`margin-inline` defines the inline start and end margins of an element. So instead of using `margin-left` and `margin-right` we can use the inline property to define both.
682+
683+
```css
684+
.div {
685+
margin-inline: auto;
686+
}
687+
```
688+
689+
The same can be done for `margin-block` with defines the block start and end margins, i.e., `margin-top` and `margin-bottom`.
690+
691+
```css
692+
.div {
693+
margin-block: auto;
694+
}
695+
```
696+
697+
#### [Demo](https://codepen.io/AllThingsSmitty/pen/PwoOQGB)
698+
699+
<sup>[Back to top](#table-of-contents)</sup>
700+
678701
## Translations
679702

680703
> [!NOTE]

0 commit comments

Comments
 (0)