Instagram | Twitter | LinkedIn
Consider the following box model with physical properties:
What is the equivalent logical property to the border-top physical property ?
A. border-inline-start
B. border-block-start
C. border-top-start
👀 Click here to see the correct answer and explanation
Correct answer and explanation: 👇🏼
Logical properties use the terms block (the dimension perpendicular to the flow of text within a line) and inline (the dimension parallel to the flow of text within a line) to describe the direction in which they flow. For this reason, the physical border-top property is equivalent to the logical border-block-start property: block describes the direction perpendicular to the text flow (in Latin the text flow is from left to right (inline) and its perpendicular would be from top to bottom (block)) and start because in Latin the direction of the block flow direction is from top (start) to bottom (end); that is, in Latin we write from left to right but when we finish, we continue down and so on. If you are thinking that this changes depending on the writing mode, you are correct (I recommend you this post in case you are curious about this topic 👉🏼 CSS writing modes).
In the following image you can see the box model with physical properties and its equivalent with logical properties:
Below, you can see a table with the physical property on the left side and the equivalent logical property on the right side.
If you were left with many doubts about the logical properties in CSS, I recommend you the following articles:
Considera el siguiente modelo de caja con propiedades físicas:
¿ Cuál es la propiedad lógica equivalente a la propiedad física border-top ?
A. border-inline-start
B. border-block-start
C. border-top-start
👀 Click here to see the correct answer and explanation
Respuesta correcta y explicación: 👇🏼
Las propiedades lógicas usan los términos block (dimensión perpendicular al flujo del texto) e inline (dimensión paralela al flujo de texto) para describir la dirección en la que fluyen. Por esta razón, la propiedad física border-top tiene como equivalente la propiedad lógica border-block-start: block describe la dirección perpendicular al flujo del texto (en latín el flujo del texto es de izquierda a derecha (inline) y su perpendicular sería de arriba hacia abajo (block)) y start porque en latín la dirección del flujo de bloque de escritura es de arriba (start) hacia abajo (end); es decir, en latín escribimos de izquierda a derecha pero cuando terminamos, seguimos abajo y así sucesivamente. Si estás pensando en que esto cambia dependiendo del modo de escritura, estás en lo correcto (te recomiendo este post por si tienes curiosidad sobre este tema 👉🏼 CSS Writing Modes).
En la siguiente imagen puedes ver el modelo de caja con propiedades físicas y su equivalente con propiedades lógicas:
A continuación, verás una tabla con la propiedad física al lado izquierdo y la propiedad lógica equivalente al lado derecho.
Si quedaste con muuuchas dudas acerca de las propiedades lógicas en CSS, te recomiendo los siguientes artículos:
B border-block-start