4 min read
•Question 49 of 49mediumWhat are CSS Logical Properties?
Understanding inline/block vs physical properties.
What You'll Learn
- Physical vs logical
- Property mapping
- RTL support
Physical vs Logical
| Physical | Logical |
|---|---|
| top | block-start |
| bottom | block-end |
| left | inline-start |
| right | inline-end |
Properties
styles.cssCSS
.element {
/* Physical */
margin-top: 10px;
padding-left: 20px;
border-right: 1px solid;
/* Logical */
margin-block-start: 10px;
padding-inline-start: 20px;
border-inline-end: 1px solid;
}Shorthand
styles.cssCSS
.element {
margin-block: 10px 20px; /* block-start block-end */
margin-inline: 10px 20px; /* inline-start inline-end */
padding-block: 10px;
padding-inline: 20px;
}RTL Friendly
styles.cssCSS
/* Automatically flips for RTL */
.button {
margin-inline-start: auto;
padding-inline: 20px;
}