Michelle Barker con mi publicación de blog favorita: breve, práctica y te deja con una valiosa pepita para tu tiempo. Aquí, se mete en las abreviaturas de propiedades lógicas en CSS, particularmente aquellos que establecen longitudes solo en un solo eje, digamos solo el eje de bloque (vertical) o solo el eje en línea (horizontal).
Digo "bloque" e "en línea" porque, en lo que respecta a las propiedades lógicas, el eje x también podría comportarse como un eje vertical dependiendo de la corriente. writing-mode.
Entonces, donde siempre hemos tenido padding, marginy border abreviaturas que pueden admitir una sintaxis de valores múltiples, ninguna de ellas nos permite declarar longitudes en un eje específico sin establecer también una longitud en el otro eje.
Por ejemplo:
/* This gives us margin on the inline axis */
margin: 0 3rem;…pero tuvimos que establecer el otro eje para llegar allí. Sin embargo, con las propiedades lógicas, tenemos abreviaturas adicionales para cada eje, lo que significa que podemos señalar el margin-inline abreviatura para trabajar específicamente en el eje en línea:
margin-inline: 3rem;Michelle menciona mi taquigrafía de propiedad lógica favorita de pasada. ¿Cuántas veces colocas algo en este tipo de melodía?
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Podemos meter esas cuatro líneas con inset: 0. O podríamos apuntar al bloque y al eje en línea directamente con inset-block y inset-inline, respectivamente.
Mientras hablamos de taquigrafías, siempre me gusta poner una palabra de precaución sobre Restablecimientos de CSS "accidentales". solo uno de los errores comunes de CSS que cometo.
