12 KiB
| title | chunk | source | category | tags | date_saved | instance |
|---|---|---|---|---|---|---|
| Inset properties - Glossary | MDN | 1/3 | https://developer.mozilla.org/en-US/docs/Glossary/Inset_properties | reference | web, html, css, javascript, documentation | 2026-05-05T05:35:21.352505+00:00 | kb-cron |
MDN HTML HTML: Markup language
HTML reference
HTML guides
Markup languages
CSS reference
CSS guides
Layout cookbook
JavaScriptJS JavaScript: Scripting language
JS reference
JS guides
Web APIs Web APIs: Programming interfaces
Web API reference
Web API guides
- Using the Web animation API
- Using the Fetch API
- Working with the History API
- Using the Web speech API
- Using web workers
Technologies
Topics
Learn Learn web development
Frontend developer course
- Getting started modules
- Core modules
- MDN Curriculum
- Check out the video course from Scrimba, our partner
Learn HTML
Learn CSS
Learn JavaScript
Tools Discover our tools
About Get to know MDN better
Inset properties
In CSS, inset properties control positioned elements' location by specifying offsets from the elements' default positions. There are physical, logical, and shorthand inset properties.
The inset properties include the top, left, bottom, and right physical properties, their inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end flow-relative logical property equivalents, and the inset-block, inset-inline, and inset shorthands.
Physical properties reference specific physical sides of an element. Logical properties use directional keywords relative to the block and inline axes. Block axis refers to the axis that defines the stacking order of elements in a block layout. The inline axis is perpendicular to the block axis, representing the direction along which inline content like text flows within a block. The mapping depends on the element's writing-mode, direction, and text-orientation.
The interpretation of inset properties depends on the value of the position property. When position: absolute is set, they represent insets from the containing block or anchor element. With position: relative, they represent insets from the box's default margin edge position. With sticky, they represent insets from the scroll container edge. The fixed value is similar to absolute, except the element is positioned and sized relative to its fixed positioning containing block, which is often the viewport.