Merge pull request #207 from AllThingsSmitty/feature_update

Feature update

Author: AllThingsSmitty

CONTRIBUTING.md

@@ -2,33 +2,32 @@
 
 Please note that this project is released with a [Contributor Code of Conduct](CODE-OF-CONDUCT.md). By participating in this project you agree to abide by its terms.
 
-
 ## Table of Contents
 
 - [Adding to This List](#adding-to-this-list)
 - [Updating Your Pull Request](#updating-your-pull-request)
 
-
 ## Adding to This List
 
 Please ensure your pull request adheres to the following guidelines:
 
-* Search open and closed PRs to avoid duplicate suggestions.
-* Only submit CSS tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful.
-* Add your tip at the bottom of the [README](https://github.com/AllThingsSmitty/css-protips/blob/master/README.md) document. Add a link to your tip at the bottom of the table of contents.
-* Use [title-case](https://titlecaseconverter.com/).
-* Code formatting should follow standard [CSSLint](http://www.csslint.net) default settings, including:
-  * Indent with two spaces
-  * Use shorthand, e.g., `margin: 10px 10px 5px;`
-  * Use double quotes, e.g., `background: url("logo.svg");`
-  * Sort properties alphabetically
-* Make sure your text editor is set to remove trailing whitespace.
-* Check your spelling and grammar.
-* The PR should have a useful title.
+- Search open and closed PRs to avoid duplicate suggestions.
+- Only submit CSS tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful.
+- Add your tip at the bottom of the [README](https://github.com/AllThingsSmitty/css-protips/blob/master/README.md) document. Add a link to your tip at the bottom of the table of contents.
+- Use [title-case](https://titlecaseconverter.com/).
+- Code formatting should follow standard [CSSLint](http://www.csslint.net) default settings, including:
+  - Indent with two spaces
+  - Use shorthand, e.g., `margin: 10px 10px 0.5rem;`
+  - Use double quotes, e.g., `background: url("logo.svg");`
+  - Use leading zeros with numberic values, e.g., `padding: 0.75rem;`
+  - Sort properties alphabetically
+  - **Avoid letting your code formatter format other section of the README file.**
+- Make sure your text editor is set to remove trailing whitespace.
+- Check your spelling and grammar.
+- The PR should have a useful title.
 
 Thank you for your suggestions!
 
-
 ## Updating Your Pull Request
 
-Sometimes a maintainer will ask you to edit your pull request before it's included. This is normally due to spelling errors or because your PR didn't match the above guidelines guidelines. [This write-up](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) covers the different ways you can change a pull request.
+Sometimes a maintainer will ask you to edit your pull request before it's included. This is normally due to spelling errors or because your PR didn't match the above guidelines guidelines. [This write-up](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) covers the different ways you can change a pull request.

README.md

@@ -46,6 +46,7 @@ A collection of tips to help take your CSS skills pro.
 1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events)
 1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing)
 1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements)
+1. [Use `margin-inline` instead of `margin`](#use-margin-inline-instead-of-margin)
 
 ### Use a CSS Reset
 
@@ -675,6 +676,28 @@ Current versions of Chrome, Firefox, Safari, and Edge.
 
 <sup>[Back to top](#table-of-contents)</sup>
 
+### Use `margin-inline` instead of `margin`
+
+`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.
+
+```css
+.div {
+  margin-inline: auto;
+}
+```
+
+The same can be done for `margin-block` with defines the block start and end margins, i.e., `margin-top` and `margin-bottom`.
+
+```css
+.div {
+  margin-block: auto;
+}
+```
+
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/PwoOQGB)
+
+<sup>[Back to top](#table-of-contents)</sup>
+
 ## Translations
 
 > [!NOTE]