Margin, padding y border lógicos
Sustituya top/right/bottom/left por sus equivalentes de propiedades lógicas start/end/block/inline.
Margin, padding y border lógicos es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Equivalentes lógicos para el espaciado
Las propiedades físicas de espaciado tienen equivalentes lógicos que utilizan las direcciones de bloque y en línea:
margin-top→margin-block-startmargin-bottom→margin-block-endmargin-left→margin-inline-startmargin-right→margin-inline-end
Propiedades abreviadas lógicas
Las nuevas propiedades abreviadas cubren ambos lados del bloque o ambos lados en línea:
<div class="card">Card with logical spacing</div>
Centrado con margin-inline: auto
El patrón clásico de centrado ahora tiene un equivalente lógico:
<div class="container">Centered container</div>
Propiedades lógicas de borde
Establezca bordes en los lados lógicos:
<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>
Propiedades lógicas de posición
Las propiedades de posicionamiento también tienen equivalentes lógicos:
top→inset-block-startbottom→inset-block-endleft→inset-inline-startright→inset-inline-end
Abreviatura inset
La propiedad inset ya es una abreviatura lógica para los cuatro lados. inset-block e inset-inline proporcionan control sobre cada uno de los dos ejes.
<div class="wrap"><div class="overlay"></div></div>
Propiedades lógicas de dimensionamiento
Width y height tienen equivalentes lógicos:
<div class="box">Sized box</div>
Comparación: físico frente a lógico
Una barra lateral con un borde en el lado de inicio:
<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>
Valores lógicos de float y clear
Las propiedades float y clear ahora admiten valores lógicos:
<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>
text-align lógico
text-align: start y text-align: end son alternativas lógicas a left y right, y se adaptan automáticamente a la dirección del texto.
<div class="nav-link">Aligned to the start (left in LTR)</div>
Estrategia de migración
Para el código nuevo, prefiera las propiedades lógicas. En el código existente, refactorice un componente cada vez. Orden de prioridad para la migración: espaciado (margin/padding), bordes, dimensionamiento y posicionamiento.
Comprobación rápida
¿Qué propiedad lógica equivale a margin-left en un diseño LTR y debería convertirse en margin-right en RTL?
Resumen
Las propiedades lógicas de margin, padding y border utilizan las direcciones de block e inline en lugar de top, right, bottom y left físicos. Las abreviaturas como margin-block, padding-inline e inset-block cubren ambos lados a la vez. Prefiera las propiedades lógicas para todo el espaciado del código nuevo a fin de obtener compatibilidad automática con RTL y con los modos de escritura verticales.
Preguntas frecuentes
¿La lección «Margin, padding y border lógicos» es gratis?
Sí — el texto completo de «Margin, padding y border lógicos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Margin, padding y border lógicos»?
Sustituya top/right/bottom/left por sus equivalentes de propiedades lógicas start/end/block/inline. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Margin, padding y border lógicos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Por qué usar propiedades lógicas: internacionalización
- Direcciones de bloque y de línea
- Margin, padding y border lógicos
- Propiedades lógicas en layouts RTL