Syntax
margin-inline-start, padding-block, inset-inline-endExamples
Physical vs Logical Properties
The same intent, expressed in a way that adapts to writing direction.
/* Physical - assumes left-to-right, breaks in RTL languages */
.old {
margin-left: 16px;
border-right: 1px solid gray;
}
/* Logical - automatically flips for RTL languages like Arabic or Hebrew */
.modern {
margin-inline-start: 16px;
border-inline-end: 1px solid gray;
}Block and Inline Direction
Common shorthand logical properties for spacing.
.card {
padding-block: 16px; /* top and bottom, in the block direction */
padding-inline: 24px; /* left and right, in the inline direction */
}Parameters and values
- margin-inline-start/end (length): Logical equivalent of margin-left/right in LTR
- padding-block (length): Shorthand for padding-top and padding-bottom
- inset-inline / inset-block (length): Logical equivalents of left/right and top/bottom for positioning
Best practices
- Use logical properties by default in new projects, even if you are not currently building a multilingual site - they cost nothing and future-proof the layout
- This matters most for genuinely internationalized products supporting right-to-left languages like Arabic or Hebrew
- Logical properties exist for nearly every physical spacing/sizing/positioning property - margin, padding, border, inset, width (inline-size), and height (block-size)
- Mixing physical and logical properties in the same project is fine during migration, but aim for consistency within a single component
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Length Units: px, %, em, rem
CSS offers several length units. px is an absolute, fixed unit. % is relative to the parent element. em is relative to the current element's font-size (compounding when nested). rem is relative to the root (html) element's font-size, avoiding the compounding problem of em, and is generally preferred for consistent, predictable sizing.Viewport Units: vh, vw, dvh
Viewport units are relative to the browser window's dimensions rather than a parent element. vh and vw represent 1% of the viewport height and width respectively. The newer dvh (dynamic viewport height) solves the classic mobile browser problem where vh included space later covered by the address bar.calc(), min(), max(), clamp()
These functions let you compute CSS values dynamically. calc() performs math between different units. min() and max() pick the smallest or largest of a list of values. clamp(min, preferred, max) is especially powerful for fluid, responsive sizing - it uses the preferred value but never goes below min or above max.Sizing: width, min/max-width
Beyond a fixed width, CSS offers min-width and max-width to set flexible boundaries - an element can shrink or grow within those limits. This is fundamental to responsive design, letting content adapt fluidly while never becoming unreadably narrow or unreasonably wide.
CSS offers several length units. px is an absolute, fixed unit. % is relative to the parent element. em is relative to the current element's font-size (compounding when nested). rem is relative to the root (html) element's font-size, avoiding the compounding problem of em, and is generally preferred for consistent, predictable sizing.Viewport Units: vh, vw, dvh
Viewport units are relative to the browser window's dimensions rather than a parent element. vh and vw represent 1% of the viewport height and width respectively. The newer dvh (dynamic viewport height) solves the classic mobile browser problem where vh included space later covered by the address bar.calc(), min(), max(), clamp()
These functions let you compute CSS values dynamically. calc() performs math between different units. min() and max() pick the smallest or largest of a list of values. clamp(min, preferred, max) is especially powerful for fluid, responsive sizing - it uses the preferred value but never goes below min or above max.Sizing: width, min/max-width
Beyond a fixed width, CSS offers min-width and max-width to set flexible boundaries - an element can shrink or grow within those limits. This is fundamental to responsive design, letting content adapt fluidly while never becoming unreadably narrow or unreasonably wide.