{"id":317104,"date":"2020-07-17T07:36:59","date_gmt":"2020-07-17T14:36:59","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=317104"},"modified":"2021-06-15T08:25:00","modified_gmt":"2021-06-15T15:25:00","slug":"inset","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset\/","title":{"rendered":"inset"},"content":{"rendered":"\n

The inset<\/code> property in CSS is a shorthand for the four inset properties, top<\/code><\/a>, right<\/code><\/a>, bottom<\/code><\/a> and left<\/code><\/a> in one declaration. Just like the four individual properties themselves, inset<\/code> has no effect on non-positioned (static) elements. In other words, an element must declare an explicit position<\/code> value before inset properties can take effect.<\/p>\n\n\n\n

.box {\n\u00a0 inset: 10px 20px 30px 40px;\n\u00a0 position: relative;\n}<\/code><\/pre>\n\n\n\n
inset<\/code> is initially defined in the CSS Logical Properties and Values Level 1<\/a> specification, which is in Editor\u2019s Draft as of April 20, 2020.<\/p>\n\n\n
Syntax<\/h3>\n\n\n
As you may have gathered from the example above, inset<\/code> follows the same multi-value syntax of padding<\/code><\/a> and margin<\/code><\/a>. That means it accepts as many as four values (to declare offsets for top<\/code>, right<\/code>, bottom<\/code> and left<\/code>) and as few as one value (to declare an equal offset for all four properties). And, like padding<\/code> and margin<\/code>, the values flow in a clockwise direction, starting with top<\/code>.<\/p>\n\n\n\n
.element {\n\u00a0 inset: 1em 2em 3em 0; \/* top right bottom left *\/\n\u00a0 inset: 10% 5% -10%; \u00a0 \/* top left\/right bottom *\/\n\u00a0 inset: 0 10px; \u00a0 \u00a0 \u00a0 \u00a0\/* top\/bottom left\/right *\/\n\u00a0 inset: 20px; \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/* all edges = 20px *\/\n}<\/code><\/pre>\n\n\n\n
Before inset<\/code>, we\u2019d have to declare each inset<\/code> sub-property separately, like this:<\/p>\n\n\n\n
.box {\n\u00a0 position: absolute;\n\u00a0 top: 0;\n\u00a0 right: 0;\n\u00a0 bottom: 0;\n\u00a0 left: 0;\n}<\/code><\/pre>\n\n\n\n
Now, we can simply that to a single line of CSS: <\/p>\n\n\n\n
.box {\n\u00a0 position: absolute;\n\u00a0 inset: 0; \/* 🎉 *\/\n}<\/code><\/pre>\n\n\n
Values<\/h3>\n\n\n
The inset<\/code> property accepts numeric values just like top, right, bottom and left. Those values can be any valid CSS length, such as px<\/code>, em<\/code>, rem<\/code> and %<\/code>, among others.<\/p>\n\n\n\n