From 90869a5fb46f354e9efde1ec62eed3c7efeb51ab Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 13 Mar 2025 20:47:51 -0400 Subject: [PATCH 1/2] Add margin-inline tip --- README.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/README.md b/README.md index 5b6eb3e..0d31306 100644 --- a/README.md +++ b/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. [Back to top](#table-of-contents) +### 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) + +[Back to top](#table-of-contents) + ## Translations > [!NOTE] From b1aebffe925b21f5b659db6564c9967a14ed9071 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 13 Mar 2025 20:48:01 -0400 Subject: [PATCH 2/2] Minor update --- CONTRIBUTING.md | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 47d5e1e..90eb6ba 100644 --- a/CONTRIBUTING.md +++ b/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. \ No newline at end of file +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.