This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
If you use a shorthand property like margin with all 4 values, the properties will always be applied in the direction top - right - bottom - left, no matter the reading direction.
<button>Physical margin</button>
<button dir="rtl">Physical margin rtl</button>button {
margin: 20px 40px 10px 100px;
}
/*
LTR: 20px 40px 10px 100px
RTL: 20px 40px 10px 100px
*/This might be desired, but it could also happen that you want margin to respect the reading direction. Logical Properties introduce 2 new shorthand properties, margin-inline and margin-block. These properties take 1 or 2 values.
.logical {
margin-inline: 5rem; /* start and end value (= left and right) */
margin-block: 5rem; /* start and end value (= top and bottom) */
margin-inline: 1rem 2rem; /* start / end value (= left / right in ltr) */
margin-block: 3rem 4rem; /* start / end value (= top / bottom in ltr) */
}Unlike margin, margin-inline and margin-block respect the reading direction.
<button>Logical margin</button>
<button dir="rtl">Logical margin rtl</button>button {
margin-inline: 100px 40px; /* 100px = start/left, 40px = end/right */
margin-block: 20px 10px; /* 20px = start/top, 10px = end/bottom */
}
/*
LTR: 20px 40px 10px 100px
RTL: 20px 100px 10px 40px
*/My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-09-28T00:00:00+00:00) Day 3: logical property shorthands. Retrieved from https://www.scien.cx/2022/09/28/day-3-logical-property-shorthands-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.