{"id":322864,"date":"2020-10-09T07:42:53","date_gmt":"2020-10-09T14:42:53","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=322864"},"modified":"2020-10-09T07:42:54","modified_gmt":"2020-10-09T14:42:54","slug":"inset-inline-start","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset-inline-start\/","title":{"rendered":"inset-inline-start"},"content":{"rendered":"\n

inset-inline-start<\/code> is a CSS property that sets the length that an element is offset in the starting inline direction. It’s sort of like declaring left<\/code> in that it applies to positioned elements and offsets an element in the left direction, except its starting and ending points can changed based on the element’s direction<\/a><\/code>, text-orientation<\/a><\/code> and writing-mode<\/a><\/code>, just like other logical properties<\/a>.<\/p>\n\n\n\n

The property is part of the CSS Logical Properties and Values Level 1 specification<\/a> which is currently in Editor’s Draft status. That means the definition and information about it can change between now and official recommendation.<\/p>\n\n\n\n

.element {\n  inset-inline-start: 50px;\n  position: relative; \/* Apples to positioned elements *\/\n  writing-mode: vertical-rl; \/* Determines the block start direction *\/\n}<\/code><\/pre>\n\n\n\n
So, for example, if the writing mode is set to horizontal-lr<\/code> the inset-inline-start<\/code> property will act just like setting left<\/code>, offsetting an element from the left edge. You even need to specify an explicit position<\/code> on the same element for it to take effect, just like physical offset properties.<\/p>\n\n\n\n