{"id":136,"url":"https://github.com/AllThingsSmitty/css-protips","last_synced_at":"2025-08-13T19:32:31.448Z","repository":{"id":37270545,"uuid":"41592744","full_name":"AllThingsSmitty/css-protips","owner":"AllThingsSmitty","description":"⚡️ A collection of tips to help take your CSS skills pro 🦾","archived":false,"fork":false,"pushed_at":"2024-05-05T12:06:04.000Z","size":7223,"stargazers_count":27541,"open_issues_count":12,"forks_count":2150,"subscribers_count":687,"default_branch":"master","last_synced_at":"2024-05-20T04:07:20.485Z","etag":null,"topics":["awesome","awesome-list","css","css-tricks","css3","learning-resources","protip","tips","tips-and-tricks","useful"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AllThingsSmitty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-29T12:29:03.000Z","updated_at":"2024-05-29T09:23:41.186Z","dependencies_parsed_at":"2024-01-02T01:44:13.785Z","dependency_job_id":"af7d922f-16aa-480a-bf05-6c466f5710e7","html_url":"https://github.com/AllThingsSmitty/css-protips","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllThingsSmitty%2Fcss-protips","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllThingsSmitty%2Fcss-protips/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllThingsSmitty%2Fcss-protips/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllThingsSmitty%2Fcss-protips/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AllThingsSmitty","download_url":"https://codeload.github.com/AllThingsSmitty/css-protips/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229780026,"owners_count":18122914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","awesome-list","css","css-tricks","css3","learning-resources","protip","tips","tips-and-tricks","useful"],"created_at":"2024-01-05T20:12:47.334Z","updated_at":"2025-08-13T19:32:31.424Z","avatar_url":"https://github.com/AllThingsSmitty.png","language":null,"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/img/bulb.svg\" width=\"200\" alt=\"light bulb icon\"\u003e\n\u003c/div\u003e\n\n# CSS Protips [![Awesome](https://awesome.re/badge-flat.svg)](https://awesome.re)\n\nA collection of tips to help take your CSS skills pro.\n\n\u003e [!TIP]\n\u003e For other great lists check out [@sindresorhus](https://github.com/sindresorhus/)'s curated list of [awesome lists](https://github.com/sindresorhus/awesome/).\n\n## Contents\n\n- [Protips](#protips)\n- [Support](#support)\n- [Translations](#translations)\n- [Contribution Guidelines](CONTRIBUTING.md)\n\n## Protips\n\n1. [Use a CSS Reset](#use-a-css-reset)\n1. [Inherit `box-sizing`](#inherit-box-sizing)\n1. [Use `unset` Instead of Resetting All Properties](#use-unset-instead-of-resetting-all-properties)\n1. [Use `:not()` to Apply/Unapply Borders on Navigation](#use-not-to-applyunapply-borders-on-navigation)\n1. [Check if Font Is Installed Locally](#check-if-font-is-installed-locally)\n1. [Add `line-height` to `body`](#add-line-height-to-body)\n1. [Set `:focus` for Form Elements](#set-focus-for-form-elements)\n1. [Vertically-Center Anything](#vertically-center-anything)\n1. [Use `aspect-ratio` Instead of Height/Width](#use-aspect-ratio-instead-of-heightwidth)\n1. [Comma-Separated Lists](#comma-separated-lists)\n1. [Select Items Using Negative `nth-child`](#select-items-using-negative-nth-child)\n1. [Use SVG for Icons](#use-svg-for-icons)\n1. [Use the \"Lobotomized Owl\" Selector](#use-the-lobotomized-owl-selector)\n1. [Use `max-height` for Pure CSS Sliders](#use-max-height-for-pure-css-sliders)\n1. [Equal-Width Table Cells](#equal-width-table-cells)\n1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox)\n1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links)\n1. [Control Specificity Better With `:is()`](#control-specificity-better-with-is)\n1. [Style \"Default\" Links](#style-default-links)\n1. [Intrinsic Ratio Boxes](#intrinsic-ratio-boxes)\n1. [Style Broken Images](#style-broken-images)\n1. [Use `rem` for Global Sizing; Use `em` for Local Sizing](#use-rem-for-global-sizing-use-em-for-local-sizing)\n1. [Hide Autoplay Videos That Aren't Muted](#hide-autoplay-videos-that-arent-muted)\n1. [Use `:root` for Flexible Type](#use-root-for-flexible-type)\n1. [Set `font-size` on Form Elements for a Better Mobile Experience](#set-font-size-on-form-elements-for-a-better-mobile-experience)\n1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events)\n1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing)\n1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements)\n1. [Use `margin-inline` instead of `margin`](#use-margin-inline-instead-of-margin)\n\n### Use a CSS Reset\n\nCSS resets help enforce style consistency across different browsers with a clean slate for styling elements. There are plenty of reset patterns to find, or you can use a more simplified reset approach:\n\n```css\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n```\n\nNow elements will be stripped of margins and padding, and `box-sizing` lets you manage layouts with the CSS box model.\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL)\n\n\u003e [!TIP]\n\u003e If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in your CSS reset.\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Inherit `box-sizing`\n\nLet `box-sizing` be inherited from `html`:\n\n```css\nhtml {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n```\n\nThis makes it easier to change `box-sizing` in plugins or other components that leverage other behavior.\n\n#### [Demo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use `unset` Instead of Resetting All Properties\n\nWhen resetting an element's properties, it's not necessary to reset each individual property:\n\n```css\nbutton {\n  background: none;\n  border: none;\n  color: inherit;\n  font: inherit;\n  outline: none;\n  padding: 0;\n}\n```\n\nYou can specify all of an element's properties using the `all` shorthand. Setting the value to `unset` changes an element's properties to their initial values:\n\n```css\nbutton {\n  all: unset;\n}\n```\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use `:not()` to Apply/Unapply Borders on Navigation\n\nInstead of putting on the border...\n\n```css\n/* add border */\n.nav li {\n  border-right: 1px solid #666;\n}\n```\n\n...and then taking it off the last element...\n\n```css\n/* remove border */\n.nav li:last-child {\n  border-right: none;\n}\n```\n\n...use the `:not()` pseudo-class to only apply to the elements you want:\n\n```css\n.nav li:not(:last-child) {\n  border-right: 1px solid #666;\n}\n```\n\nHere, the CSS selector is read as a human would describe it.\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/LkymvO)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Check if Font Is Installed Locally\n\nYou can check if a font is installed locally before fetching it remotely, which is a good performance tip, too.\n\n```css\n@font-face {\n  font-family: \"Dank Mono\";\n  src:\n    /* Full name */ local(\"Dank Mono\"), /* Postscript name */ local(\"Dank Mono\"),\n    /* Otherwise, download it! */ url(\"//...a.server/fonts/DankMono.woff\");\n}\n\ncode {\n  font-family: \"Dank Mono\", system-ui-monospace;\n}\n```\n\nH/T to Adam Argyle for sharing this protip and [demo](https://codepen.io/argyleink/pen/VwYJpgR).\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Add `line-height` to `body`\n\nYou don't need to add `line-height` to each `\u003cp\u003e`, `\u003ch*\u003e`, _et al_. separately. Instead, add it to `body`:\n\n```css\nbody {\n  line-height: 1.5;\n}\n```\n\nThis way textual elements can inherit from `body` easily.\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/VjbdYd)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Set `:focus` for Form Elements\n\nSighted keyboard users rely on focus to determine where keyboard events go in the page. Make focus for form elements stand out and consistent than a browser's default implementation:\n\n```css\na:focus,\nbutton:focus,\ninput:focus,\nselect:focus,\ntextarea:focus {\n  box-shadow: none;\n  outline: #000 dotted 2px;\n  outline-offset: 0.05em;\n}\n```\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Vertically-Center Anything\n\nNo, it's not black magic, you really can center elements vertically. You can do this with flexbox...\n\n```css\nhtml,\nbody {\n  height: 100%;\n}\n\nbody {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n}\n```\n\n...and also with CSS Grid:\n\n```css\nbody {\n  display: grid;\n  height: 100vh;\n  place-items: center;\n}\n```\n\n\u003e [!TIP]\n\u003e Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that.\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use `aspect-ratio` Instead of Height/Width\n\nThe `aspect-ratio` property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift. Use `object-fit` with it to prevent disrupting the layout if the height/width values of images changes.\n\n```css\nimg {\n  aspect-ratio: 16 / 9; /* width / height */\n  object-fit: cover;\n}\n```\n\nLearn more about the `aspect-ratio` property in this [web.dev post](https://web.dev/articles/aspect-ratio).\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Comma-Separated Lists\n\nMake list items look like a real, comma-separated list:\n\n```css\nul \u003e li:not(:last-child)::after {\n  content: \",\";\n}\n```\n\nUse the `:not()` pseudo-class and no comma will be added to the last item.\n\n\u003e [!NOTE]\n\u003e This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Select Items Using Negative `nth-child`\n\nUse negative `nth-child` in CSS to select items 1 through n.\n\n```css\nli {\n  display: none;\n}\n\n/* select items 1 through 3 and display them */\nli:nth-child(-n + 3) {\n  display: block;\n}\n```\n\nOr, since you've already learned a little about [using `:not()`](#use-not-to-applyunapply-borders-on-navigation), try:\n\n```css\n/* select all items except the first 3 and display them */\nli:not(:nth-child(-n + 3)) {\n  display: block;\n}\n```\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/WxjKZp)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use SVG for Icons\n\nThere's no reason not to use SVG for icons:\n\n```css\n.logo {\n  background: url(\"logo.svg\");\n}\n```\n\nSVG scales well for all resolution types and is supported in all browsers [back to IE9](http://caniuse.com/#search=svg). Ditch your .png, .jpg, or .gif-jif-whatev files.\n\n\u003e [!NOTE]\n\u003e If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:\n\n```css\n.no-svg .icon-only::after {\n  content: attr(aria-label);\n}\n```\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use the \"Lobotomized Owl\" Selector\n\nIt may have a strange name but using the universal selector (`*`) with the adjacent sibling selector (`+`) can provide a powerful CSS capability:\n\n```css\n* + * {\n  margin-top: 1.5em;\n}\n```\n\nIn this example, all elements in the flow of the document that follow other elements will receive `margin-top: 1.5em`.\n\n\u003e [!TIP]\n\u003e For more on the \"lobotomized owl\" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on _A List Apart_.\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/grRvWq)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use `max-height` for Pure CSS Sliders\n\nImplement CSS-only sliders using `max-height` with overflow hidden:\n\n```css\n.slider {\n  max-height: 200px;\n  overflow-y: hidden;\n  width: 300px;\n}\n\n.slider:hover {\n  max-height: 600px;\n  overflow-y: scroll;\n}\n```\n\nThe element expands to the `max-height` value on hover and the slider displays as a result of the overflow.\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Equal-Width Table Cells\n\nTables can be a pain to work with. Try using `table-layout: fixed` to keep cells at equal width:\n\n```css\n.calendar {\n  table-layout: fixed;\n}\n```\n\nPain-free table layouts.\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/jALALm)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Get Rid of Margin Hacks With Flexbox\n\nWhen working with column gutters you can get rid of `nth-`, `first-`, and `last-child` hacks by using flexbox's `space-between` property:\n\n```css\n.list {\n  display: flex;\n  justify-content: space-between;\n}\n\n.list .person {\n  flex-basis: 23%;\n}\n```\n\nNow column gutters always appear evenly-spaced.\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use Attribute Selectors with Empty Links\n\nDisplay links when the `\u003ca\u003e` element has no text value but the `href` attribute has a link:\n\n```css\na[href^=\"http\"]:empty::before {\n  content: attr(href);\n}\n```\n\nThat's really convenient.\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/zBzXRx)\n\n\u003e [!NOTE]\n\u003e This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Control Specificity Better with `:is()`\n\nThe `:is()` pseudo-class is used to target multiple selectors at once, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form.\n\n```css\n:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {\n  color: green;\n}\n```\n\nThe above ruleset is equivalent to the following number selector rules...\n\n```css\nsection h1,\nsection h2,\nsection h3,\nsection h4,\nsection h5,\nsection h6,\narticle h1,\narticle h2,\narticle h3,\narticle h4,\narticle h5,\narticle h6,\naside h1,\naside h2,\naside h3,\naside h4,\naside h5,\naside h6,\nnav h1,\nnav h2,\nnav h3,\nnav h4,\nnav h5,\nnav h6 {\n  color: green;\n}\n```\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Style \"Default\" Links\n\nAdd a style for \"default\" links:\n\n```css\na[href]:not([class]) {\n  color: #008000;\n  text-decoration: underline;\n}\n```\n\nNow links that are inserted via a CMS, which don't usually have a `class` attribute, will have a distinction without generically affecting the cascade.\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Intrinsic Ratio Boxes\n\nTo create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div:\n\n```css\n.container {\n  height: 0;\n  padding-bottom: 20%;\n  position: relative;\n}\n\n.container div {\n  border: 2px dashed #ddd;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n```\n\nUsing 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/jALZvE)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Style Broken Images\n\nMake broken images more aesthetically-pleasing with a little bit of CSS:\n\n```css\nimg {\n  display: block;\n  font-family: sans-serif;\n  font-weight: 300;\n  height: auto;\n  line-height: 2;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n```\n\nNow add pseudo-elements rules to display a user message and URL reference of the broken image:\n\n```css\nimg::before {\n  content: \"We're sorry, the image below is broken :(\";\n  display: block;\n  margin-bottom: 10px;\n}\n\nimg::after {\n  content: \"(url: \" attr(src) \")\";\n  display: block;\n  font-size: 12px;\n}\n```\n\n\u003e [!TIP]\n\u003e Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/).\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use `rem` for Global Sizing; Use `em` for Local Sizing\n\nAfter setting the base font size at the root (`html { font-size: 100%; }`), set the font size for textual elements to `em`:\n\n```css\nh2 {\n  font-size: 2em;\n}\n\np {\n  font-size: 1em;\n}\n```\n\nThen set the font-size for modules to `rem`:\n\n```css\narticle {\n  font-size: 1.25rem;\n}\n\naside .module {\n  font-size: 0.9rem;\n}\n```\n\nNow each module becomes compartmentalized and easier to style, more maintainable, and flexible.\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Hide Autoplay Videos That Aren't Muted\n\nThis is a great trick for a custom user stylesheet. Avoid overloading a user with sound from a video that autoplays when the page is loaded. If the sound isn't muted, don't show the video:\n\n```css\nvideo[autoplay]:not([muted]) {\n  display: none;\n}\n```\n\nOnce again, we're taking advantage of using the [`:not()`](#use-not-to-applyunapply-borders-on-navigation) pseudo-class.\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use `:root` for Flexible Type\n\nThe type font size in a responsive layout should be able to adjust with each viewport. You can calculate the font size based on the viewport height and width using `:root`:\n\n```css\n:root {\n  font-size: calc(1vw + 1vh + 0.5vmin);\n}\n```\n\nNow you can utilize the `root em` unit based on the value calculated by `:root`:\n\n```css\nbody {\n  font: 1rem/1.6 sans-serif;\n}\n```\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/XKgOkR)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Set `font-size` on Form Elements for a Better Mobile Experience\n\nTo avoid mobile browsers (iOS Safari, _et al_.) from zooming in on HTML form elements when a `\u003cselect\u003e` drop-down is tapped, add `font-size` to the selector rule:\n\n```css\ninput[type=\"text\"],\ninput[type=\"number\"],\nselect,\ntextarea {\n  font-size: 16px;\n}\n```\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use Pointer Events to Control Mouse Events\n\n[Pointer events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) allow you to specify how the mouse interacts with the element it's touching. To disable the default pointer event on a button, for instance:\n\n```css\nbutton:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n```\n\nIt's that simple.\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Set `display: none` on Line Breaks Used as Spacing\n\nAs [Harry Roberts pointed out](https://twitter.com/csswizardry/status/1170835532584235008), this can help prevent CMS users from using extra line breaks for spacing:\n\n```css\nbr + br {\n  display: none;\n}\n```\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use `:empty` to Hide Empty HTML Elements\n\nIf you have HTML elements that are empty, i.e., the content has yet to be set either by a CMS or dynamically injected (e.g., `\u003cp class=\"error-message\"\u003e\u003c/p\u003e`) and it's creating unwanted space on your layout, use the `:empty` pseudo-class to hide the element on the layout.\n\n```css\n:empty {\n  display: none;\n}\n```\n\n\u003e [!NOTE]\n\u003e Keep in mind that elements with whitespace aren't considered empty, e.g., `\u003cp class=\"error-message\"\u003e \u003c/p\u003e`.\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n## Support\n\nCurrent versions of Chrome, Firefox, Safari, and Edge.\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n### Use `margin-inline` instead of `margin`\n\n`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.\n\n```css\n.div {\n  margin-inline: auto;\n}\n```\n\nThe same can be done for `margin-block` with defines the block start and end margins, i.e., `margin-top` and `margin-bottom`.\n\n```css\n.div {\n  margin-block: auto;\n}\n```\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/PwoOQGB)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n\n## Translations\n\n\u003e [!NOTE]\n\u003e I've had less time available to maintain the growing list of translated tips; adding a new tip requires including it with over a dozen translations. For that reason, translated README files are likely to not include all the tips listed on the main README file.\n\n- [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN)\n- [正體中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW)\n- [Deutsch](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/de-DE)\n- [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES)\n- [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR)\n- [λληνικά](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gr-GR)\n- [ગુજરાતી](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gu-IND)\n- [Italiano](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/it-IT)\n- [日本語](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ja-JP)\n- [한국어](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ko-KR)\n- [Polskie](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pl-PL)\n- [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR)\n- [Português do Europe](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-PT)\n- [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU)\n- [Tiếng Việt](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/vn-VN)\n\n\u003csup\u003e[Back to top](#contents)\u003c/sup\u003e\n","funding_links":[],"categories":["Front-End Development","Others","Technical","Unknow","CSS Resources","Uncategorized","Table of Contents","FrontEnd","Live Site:   [searchAwesome](https://search-awesome.vercel.app/)","Frontend","miscellaneous","Dicas","Banques de ressources, dépôts, cours","前端开发","前端开发框架及项目","Themed Directories"],"sub_categories":["ramanihiteshc@gmail.com","Uncategorized","Frontend","Resource","Côté client (*Front-end*)","其他_文本生成、文本对话","Misc"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAllThingsSmitty%2Fcss-protips","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAllThingsSmitty%2Fcss-protips","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAllThingsSmitty%2Fcss-protips/lists"}