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