What are logical properties? - CSS Tutorial

(energetic music) - [Instructor] In the traditional box model, we think of the CSS box as a physical box. It has a width, a height, and sides, top, right, bottom, and left. When we define the size of a box, we set the width and height properties. And when we define the padding or border or margin of a box, we set padding or border or margin top, right, bottom, left. Now, this box model is built on an assumption that text is always displayed on horizontal lines flowing left to right. That's not always the case, though. Some languages display text horizontally from right to left, and some display text vertically. And when the text direction changes, the traditional box model and its properties become illogical. With vertical text, this whole width and height and top, right, bottom, left way of thinking about the box gets confusing because the end of the line is now at the bottom, not the right, and the right side of the box is to the right of the first line of text, which is not the way we normally think about things. Here's the thing. Working with text, we don't set the width of a text. We define the length of the line. And we don't set the height of the text box. We set the length of the axis perpendicular to the line direction. This is why we now have logical properties. With logical properties, we control the layout of the box based on the logical flow of its contents rather than their physical direction. So instead of thinking about the width and height of a box, we think about the inline and block size of the box, inline being the inline dimension or axis the text flows along, and block being the dimension or axis perpendicular to inline. With logical properties, we set the inline size, the length along the inline axis, with the flow of the text, and the block size, the length perpendicular to that inline axis, so effectively the number of lines allowed in the box. And for the sides, the padding and border and margin, the logical properties become inline-start and inline-end, block-start and block-end. That way, when the text direction changes or writing mode changes from left to right to right to left or from horizontal to vertical, the logical properties follow suit, and the box size, padding, border, and margin all behave, well, logically.