Skip to content

Feature update #207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 14, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 15 additions & 16 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
23 changes: 23 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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]
Expand Down