CSS
Tutorial CSS: Rellenos y márgenes
Aprende a controlar padding y margin en CSS para crear diseños equilibrados y accesibles con técnicas prácticas y shorthand.
Aprende CSS y certifícateControl de padding en los cuatro lados del elemento
El padding es una propiedad fundamental en CSS que define el espacio interno entre el contenido de un elemento y su borde. A diferencia del margen, que crea espacio fuera del elemento, el padding crea espacio dentro del elemento, empujando el contenido hacia el centro.
CSS nos permite controlar el padding de forma independiente para cada uno de los cuatro lados de un elemento, lo que nos da un control preciso sobre el espacio interno.
Propiedades individuales de padding
Para controlar el padding de cada lado de manera específica, CSS proporciona cuatro propiedades diferentes:
.elemento {
padding-top: 10px; /* Padding superior */
padding-right: 20px; /* Padding derecho */
padding-bottom: 15px; /* Padding inferior */
padding-left: 25px; /* Padding izquierdo */
}
Cada una de estas propiedades acepta diferentes unidades de medida:
- Valores absolutos: px, pt, cm, mm, in
- Valores relativos: em, rem, %, vh, vw
- Valor cero: no requiere unidad (0 en lugar de 0px)
Aplicación práctica del padding
Veamos un ejemplo práctico de cómo el padding afecta a un elemento:
.card {
background-color: #f0f0f0;
border: 1px solid #ccc;
color: #333;
/* Sin padding aún */
}
.card-padded {
background-color: #f0f0f0;
border: 1px solid #ccc;
color: #333;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;
}
En este ejemplo, .card-padded
tendrá espacio interno que separa su contenido del borde, mientras que .card
mostrará su contenido pegado al borde.
Padding con valores porcentuales
Cuando usamos valores porcentuales para el padding, es importante entender que estos porcentajes se calculan en base al ancho del elemento padre, incluso para el padding vertical:
.container {
width: 400px;
}
.box {
padding-top: 10%; /* 40px (10% de 400px) */
padding-left: 25%; /* 100px (25% de 400px) */
}
Esta característica puede resultar útil para crear diseños proporcionales, pero también puede causar confusión si no se tiene en cuenta.
Padding en elementos inline vs block
El comportamiento del padding varía según el tipo de elemento:
- Elementos block: el padding funciona en los cuatro lados y afecta al tamaño total del elemento.
- Elementos inline: el padding horizontal (izquierda/derecha) funciona normalmente, pero el padding vertical (arriba/abajo) puede comportarse de manera inesperada, ya que no afecta al flujo del texto en línea.
Veamos un ejemplo:
/* Elemento block con padding */
.block-element {
display: block;
background-color: #e0f7fa;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;
}
/* Elemento inline con padding */
.inline-element {
display: inline;
background-color: #ffecb3;
padding-top: 20px; /* No afecta al flujo del texto */
padding-right: 15px;
padding-bottom: 20px; /* No afecta al flujo del texto */
padding-left: 15px;
}
En el caso del elemento inline, el padding vertical no desplazará otros elementos en línea, aunque visualmente sí se verá el espacio.
Padding y el modelo de caja
El padding forma parte del modelo de caja de CSS y afecta directamente al tamaño total de un elemento. Por defecto, cuando estableces un ancho para un elemento, el padding se añade a ese ancho:
.box {
width: 200px;
padding-left: 20px;
padding-right: 20px;
/* Ancho total: 240px (200px + 20px + 20px) */
}
Sin embargo, podemos modificar este comportamiento con la propiedad box-sizing
:
.box {
box-sizing: border-box;
width: 200px;
padding-left: 20px;
padding-right: 20px;
/* Ancho total: 200px (el padding se incluye dentro del ancho definido) */
}
Casos de uso comunes
El control individual del padding en los cuatro lados es especialmente útil en estos escenarios:
- Tarjetas de contenido: Donde queremos más espacio en la parte superior e inferior que en los laterales.
.card {
padding-top: 24px;
padding-right: 16px;
padding-bottom: 24px;
padding-left: 16px;
}
- Botones: Donde el padding horizontal suele ser mayor que el vertical para crear botones más anchos que altos.
.button {
padding-top: 8px;
padding-right: 24px;
padding-bottom: 8px;
padding-left: 24px;
}
- Menús de navegación: Donde podemos necesitar diferentes espaciados para cada lado.
.nav-item {
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 8px; /* Menos padding a la izquierda si hay un icono */
}
Consideraciones de accesibilidad
Un padding adecuado mejora significativamente la usabilidad y accesibilidad de una interfaz:
- Los elementos interactivos (como botones o enlaces) deberían tener suficiente padding para crear áreas de clic cómodas, especialmente en dispositivos táctiles.
- Se recomienda un padding mínimo de 44×44 píxeles para elementos táctiles según las pautas de accesibilidad WCAG.
.touch-button {
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 16px;
min-height: 44px;
min-width: 44px;
}
El control preciso del padding en los cuatro lados de un elemento nos permite crear interfaces más equilibradas visualmente y mejorar la experiencia del usuario, adaptando el espacio interno según las necesidades específicas de cada componente.
Shorthand de padding y orden de declaración
CSS ofrece una forma abreviada (shorthand) para definir el padding de un elemento, lo que nos permite escribir código más conciso y mantenible. En lugar de declarar cada lado individualmente con propiedades separadas, podemos usar la propiedad padding
para establecer todos los valores en una sola línea.
Sintaxis básica del shorthand
La propiedad padding
acepta de uno a cuatro valores, dependiendo de cuántos lados queremos configurar simultáneamente:
/* Sintaxis: padding: [top] [right] [bottom] [left]; */
.elemento {
padding: 10px;
}
Reglas de orden en la declaración shorthand
El orden de los valores en la declaración shorthand sigue un patrón específico que es crucial entender:
- Un valor: Se aplica a los cuatro lados por igual.
- Dos valores: El primero se aplica a top/bottom, el segundo a right/left.
- Tres valores: El primero se aplica a top, el segundo a right/left, y el tercero a bottom.
- Cuatro valores: Siguen el orden de las agujas del reloj - top, right, bottom, left (TRouBLe).
Veamos ejemplos de cada caso:
/* Un valor: todos los lados iguales */
.box-1 {
padding: 20px;
/* Equivale a:
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
*/
}
/* Dos valores: vertical | horizontal */
.box-2 {
padding: 10px 30px;
/* Equivale a:
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
*/
}
/* Tres valores: top | horizontal | bottom */
.box-3 {
padding: 15px 25px 10px;
/* Equivale a:
padding-top: 15px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
*/
}
/* Cuatro valores: top | right | bottom | left */
.box-4 {
padding: 10px 20px 15px 25px;
/* Equivale a:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;
*/
}
Truco mnemotécnico para recordar el orden
Para recordar el orden de los cuatro valores, puedes usar el acrónimo TRouBLe (Top, Right, Bottom, Left) o pensar en el movimiento de las agujas del reloj empezando desde arriba.
Mezcla de shorthand y propiedades individuales
En ocasiones, es útil combinar el shorthand con propiedades individuales para sobrescribir valores específicos:
.elemento {
/* Establecemos un padding base para todos los lados */
padding: 20px;
/* Sobrescribimos solo el padding inferior */
padding-bottom: 40px;
}
En este ejemplo, el elemento tendrá 20px de padding en los lados superior, derecho e izquierdo, pero 40px en el lado inferior.
Casos de uso prácticos
El shorthand de padding es especialmente útil en estos escenarios:
- Componentes simétricos: Cuando necesitamos el mismo padding en todos los lados.
.card {
padding: 16px;
background-color: #f5f5f5;
}
- Diseños con simetría horizontal/vertical: Cuando queremos diferentes valores para los ejes.
.button {
padding: 8px 24px; /* 8px arriba/abajo, 24px izquierda/derecha */
border-radius: 4px;
}
- Elementos con espaciado asimétrico: Cuando cada lado necesita un valor específico.
.notification {
padding: 12px 16px 12px 50px; /* Más espacio a la izquierda para un icono */
background-position: 16px center;
background-repeat: no-repeat;
}
Unidades mixtas en shorthand
Podemos combinar diferentes unidades de medida en una misma declaración shorthand:
.mixed-units {
padding: 1em 5% 10px 2rem;
}
Esto nos permite crear diseños más flexibles que se adaptan a diferentes contextos.
Consideraciones de rendimiento
El uso de shorthand puede tener implicaciones sutiles en el rendimiento y mantenimiento del código:
- Ventaja: Menos código, lo que resulta en hojas de estilo más pequeñas.
- Consideración: Al usar shorthand, sobrescribimos todos los valores, incluso los que no queremos cambiar.
/* Si tenemos esto en un archivo CSS: */
.elemento {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;
}
/* Y luego en otro archivo añadimos: */
.elemento {
padding: 30px; /* Sobrescribe TODOS los valores anteriores */
}
Compatibilidad con herramientas de desarrollo
Las herramientas de desarrollo modernas muestran el shorthand de padding de forma visual, lo que facilita entender cómo se aplica a cada lado del elemento:
/* En el código: */
.elemento {
padding: 10px 20px 15px 25px;
}
/* En las herramientas de desarrollo se mostrará visualmente
cómo estos valores se aplican a cada lado del elemento */
Buenas prácticas
- Consistencia: Elige un enfoque (shorthand o propiedades individuales) y úsalo de manera consistente en tu proyecto.
- Legibilidad: Para valores complejos o asimétricos, considera usar propiedades individuales para mayor claridad.
- Mantenimiento: El shorthand es ideal para componentes donde todos los valores de padding cambian juntos.
/* Para componentes simples, usa shorthand */
.simple-component {
padding: 16px;
}
/* Para componentes complejos, considera propiedades individuales */
.complex-component {
padding-top: 24px; /* Espacio para el título */
padding-right: 16px; /* Espacio lateral estándar */
padding-bottom: 32px; /* Espacio extra al final */
padding-left: 16px; /* Espacio lateral estándar */
}
El shorthand de padding es una herramienta poderosa que, cuando se usa correctamente, puede hacer que tu código CSS sea más eficiente y fácil de mantener. Dominar el orden de declaración te permitirá crear diseños precisos con menos líneas de código.
Propiedades de margin y colapso de márgenes verticales
El margen en CSS define el espacio exterior alrededor de un elemento, creando distancia entre este y otros elementos adyacentes. A diferencia del padding que actúa dentro del elemento, el margen crea espacio fuera de los bordes del elemento.
Propiedades individuales de margin
CSS nos permite controlar el margen de cada lado de un elemento de forma independiente mediante cuatro propiedades específicas:
.elemento {
margin-top: 20px; /* Margen superior */
margin-right: 15px; /* Margen derecho */
margin-bottom: 30px; /* Margen inferior */
margin-left: 10px; /* Margen izquierdo */
}
Al igual que con el padding, estas propiedades aceptan diferentes unidades de medida:
- Valores absolutos (px, pt, cm)
- Valores relativos (em, rem, %)
- Valores negativos (para superponer elementos)
- El valor
auto
(útil para centrado horizontal)
Shorthand de margin
Similar al padding, existe una notación abreviada para definir los márgenes:
/* Sintaxis: margin: [top] [right] [bottom] [left]; */
.elemento {
margin: 10px 20px 15px 25px;
}
/* Con dos valores: vertical | horizontal */
.otro-elemento {
margin: 15px 30px;
}
El orden sigue el mismo patrón que el shorthand de padding: arriba, derecha, abajo, izquierda (TRouBLe).
El fenómeno del colapso de márgenes verticales
Una característica única de los márgenes en CSS es el colapso de márgenes verticales. Este comportamiento ocurre cuando los márgenes verticales (superior e inferior) de elementos adyacentes se tocan:
.primer-parrafo {
margin-bottom: 20px;
}
.segundo-parrafo {
margin-top: 15px;
}
En este ejemplo, la distancia entre los párrafos no será de 35px (20px + 15px) como podría esperarse, sino de 20px (el mayor de los dos márgenes). Los márgenes verticales colapsan, y solo se aplica el margen más grande.
Reglas del colapso de márgenes
El colapso de márgenes sigue estas reglas fundamentales:
- Solo afecta a márgenes verticales (top y bottom), nunca a los horizontales (left y right)
- Solo ocurre entre elementos de bloque (no afecta a elementos inline o inline-block)
- Se aplica el margen más grande de los que colapsan
- Los márgenes negativos reducen el margen resultante
- Si un margen es negativo y otro positivo, se restan sus valores absolutos
Veamos algunos ejemplos prácticos:
/* Ejemplo 1: Colapso básico */
.elemento-1 {
margin-bottom: 30px;
}
.elemento-2 {
margin-top: 20px;
}
/* Resultado: 30px de separación (el mayor) */
/* Ejemplo 2: Con margen negativo */
.elemento-3 {
margin-bottom: 30px;
}
.elemento-4 {
margin-top: -10px;
}
/* Resultado: 20px de separación (30px - 10px) */
/* Ejemplo 3: Ambos negativos */
.elemento-5 {
margin-bottom: -15px;
}
.elemento-6 {
margin-top: -25px;
}
/* Resultado: -25px (el más negativo) */
Situaciones donde ocurre el colapso
El colapso de márgenes puede ocurrir en tres escenarios principales:
- Entre elementos hermanos consecutivos (el caso más común)
- Entre un padre y su primer/último hijo cuando no hay padding, border o contenido que los separe
- Entre elementos vacíos que no tienen altura, padding o border
/* Colapso entre padre e hijo */
.padre {
margin-top: 40px;
/* Sin border, padding o contenido antes del primer hijo */
}
.primer-hijo {
margin-top: 25px;
/* Este margen colapsará con el del padre */
}
/* Resultado: el margen superior del conjunto será 40px, no 65px */
Cómo evitar el colapso de márgenes
Hay varias técnicas para prevenir el colapso cuando no es deseable:
- Añadir border o padding (incluso de 1px) entre los márgenes
- Crear un contexto de formato de bloque (BFC) mediante:
overflow: auto
ooverflow: hidden
display: flow-root
(solución moderna)display: flex
odisplay: grid
- Usar display: inline-block en lugar de block
/* Evitar colapso con padding */
.contenedor {
padding-top: 1px;
padding-bottom: 1px;
}
/* Evitar colapso con BFC */
.contenedor-bfc {
display: flow-root;
/* Los márgenes de los hijos no colapsarán con los del contenedor */
}
Casos prácticos donde el colapso es útil
A pesar de que puede parecer confuso, el colapso de márgenes tiene propósitos prácticos:
- Espaciado consistente entre párrafos independientemente de su anidamiento
- Mantener ritmo vertical en documentos con secciones anidadas
- Simplificar el diseño tipográfico al no tener que preocuparse por márgenes duplicados
/* Ejemplo de ritmo vertical consistente */
h1, h2, h3, p {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
/* Gracias al colapso, la separación entre elementos será siempre 1.5rem */
Márgenes negativos y sus aplicaciones
Los márgenes negativos son una técnica poderosa que puede utilizarse para:
- Superponer elementos parcialmente
- Compensar el padding de un contenedor padre
- Crear efectos visuales como elementos que sobresalen
.card {
padding: 20px;
background-color: #f5f5f5;
}
.card-image {
margin-top: -40px; /* La imagen se superpondrá a la tarjeta */
border: 3px solid white;
}
Diferencias entre margin y padding
Es importante entender cuándo usar margin y cuándo usar padding:
Usa margin para:
Crear espacio entre elementos
Centrar elementos horizontalmente (con
margin: auto
)Ajustar la posición de un elemento en relación con otros
Usa padding para:
Crear espacio entre el borde y el contenido
Aumentar el área clickable de un elemento
Mantener el fondo visible alrededor del contenido
.button {
/* Padding para área clickable y espacio interno */
padding: 12px 24px;
/* Margin para separación de otros elementos */
margin: 10px;
}
Consideraciones de diseño responsivo
Al trabajar con márgenes en diseños responsivos:
- Considera usar unidades relativas (em, rem, %) para márgenes que escalen con el tamaño de la pantalla
- Utiliza media queries para ajustar márgenes en diferentes tamaños de pantalla
- Ten en cuenta que los márgenes porcentuales se calculan en base al ancho del contenedor padre
.contenedor {
margin: 5%; /* En pantallas grandes será mayor que en pequeñas */
}
@media (max-width: 768px) {
.contenedor {
margin: 20px; /* Valor fijo para pantallas pequeñas */
}
}
El dominio de las propiedades de margin y la comprensión del colapso de márgenes verticales son fundamentales para crear diseños precisos y predecibles en CSS. Aunque el colapso puede parecer inicialmente contraintuitivo, una vez entendido se convierte en una herramienta valiosa para mantener espaciados consistentes en tus diseños.
Centrado horizontal con margin: auto y sus limitaciones
Uno de los desafíos más comunes en el diseño web es centrar elementos horizontalmente. CSS ofrece varias técnicas para lograr esto, pero una de las más utilizadas y sencillas es el uso de margin: auto
. Esta técnica aprovecha una característica especial de la propiedad margin
cuando se le asigna el valor auto
.
Cómo funciona margin: auto
Cuando asignamos el valor auto
a los márgenes horizontales (izquierdo y derecho) de un elemento de bloque con ancho definido, el navegador distribuye automáticamente el espacio disponible de manera equitativa entre ambos lados:
.centered-box {
width: 300px;
margin-left: auto;
margin-right: auto;
/* O usando shorthand */
/* margin: 0 auto; */
}
En este ejemplo, el elemento .centered-box
se centrará horizontalmente dentro de su contenedor. El navegador calcula el espacio disponible (el ancho del contenedor menos el ancho del elemento) y lo divide equitativamente entre los márgenes izquierdo y derecho.
Sintaxis abreviada para centrar horizontalmente
La forma más común de aplicar esta técnica es usando la notación abreviada de margin
:
.centered-element {
width: 80%;
margin: 0 auto;
}
En esta declaración:
- El primer valor (
0
) establece los márgenes superior e inferior - El segundo valor (
auto
) establece los márgenes izquierdo y derecho
Esta es una de las técnicas de centrado más antiguas y ampliamente compatibles en CSS.
Requisitos para que margin: auto funcione correctamente
Para que el centrado con margin: auto
funcione, deben cumplirse estas condiciones:
- El elemento debe ser de tipo bloque (
display: block
) - El elemento debe tener un ancho definido (mediante
width
omax-width
) - El elemento debe tener espacio disponible en su contenedor
/* Ejemplo completo */
.container {
width: 100%;
background-color: #f0f0f0;
}
.centered-box {
display: block;
width: 50%;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
Centrado de elementos inline y inline-block
Es importante destacar que margin: auto
no funciona para centrar elementos inline o inline-block. Para estos elementos, debemos usar una técnica diferente:
.container {
text-align: center;
}
.inline-element {
display: inline-block;
width: 200px;
}
En este caso, es el text-align: center
aplicado al contenedor lo que centra el elemento inline-block, no los márgenes automáticos.
Limitaciones de margin: auto
A pesar de su utilidad, margin: auto
tiene varias limitaciones importantes:
1. No funciona para centrado vertical
La limitación más significativa es que margin: auto
solo funciona para centrado horizontal en el flujo normal de documentos:
.box {
height: 200px;
margin-top: auto; /* No centrará verticalmente */
margin-bottom: auto; /* No centrará verticalmente */
}
Para centrado vertical, necesitamos usar otras técnicas como flexbox, grid o posicionamiento absoluto.
2. Requiere ancho definido
Si no especificamos un ancho para el elemento, este ocupará el 100% del ancho disponible por defecto, lo que hace que no haya espacio para distribuir:
.full-width {
/* Sin width definido, ocupa 100% */
margin: 0 auto; /* No tendrá efecto visible */
}
3. No funciona con elementos flotantes
Los elementos con float
se sacan del flujo normal del documento, lo que hace que margin: auto
no funcione para centrarlos:
.float-element {
float: left;
width: 200px;
margin: 0 auto; /* No funcionará para centrar */
}
4. No funciona con elementos de posición absoluta o fija sin restricciones
Para elementos con posicionamiento absoluto o fijo, margin: auto
solo funciona si las propiedades left
y right
están definidas:
/* No funcionará para centrar */
.absolute-element {
position: absolute;
width: 200px;
margin: 0 auto;
}
/* Sí funcionará para centrar */
.absolute-centered {
position: absolute;
width: 200px;
left: 0;
right: 0;
margin: 0 auto;
}
5. No funciona con elementos inline
Como mencionamos anteriormente, los elementos inline no responden a margin: auto
para centrado:
.inline-text {
margin: 0 auto; /* No tendrá efecto */
}
Alternativas modernas a margin: auto
Debido a estas limitaciones, los desarrolladores modernos a menudo prefieren otras técnicas de centrado más versátiles:
Flexbox para centrado completo
.flex-container {
display: flex;
justify-content: center; /* Centrado horizontal */
align-items: center; /* Centrado vertical */
}
.flex-item {
/* No necesita width definido ni margin: auto */
}
Grid para centrado en diseños complejos
.grid-container {
display: grid;
place-items: center; /* Centrado horizontal y vertical */
}
.grid-item {
/* Centrado automático */
}
Transformaciones para centrado absoluto
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Casos de uso prácticos para margin: auto
A pesar de sus limitaciones, margin: auto
sigue siendo útil en muchos escenarios:
- Contenedores principales de una página:
.main-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
- Imágenes responsivas dentro de contenedores:
.responsive-image {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
- Botones o llamadas a la acción centrados:
.cta-button {
display: block;
width: 200px;
margin: 20px auto;
padding: 10px;
background-color: #3498db;
color: white;
text-align: center;
border-radius: 4px;
}
Compatibilidad con navegadores
Una ventaja importante de margin: auto
es su excelente compatibilidad con navegadores, incluso con versiones muy antiguas. Mientras que técnicas como flexbox y grid pueden requerir prefijos o no funcionar en navegadores obsoletos, margin: auto
funciona de manera consistente en prácticamente todos los navegadores.
Buenas prácticas al usar margin: auto
Para aprovechar al máximo esta técnica:
- Combina con max-width en lugar de width fijo para mejorar la responsividad:
.responsive-container {
max-width: 1200px;
margin: 0 auto;
}
- Usa unidades relativas para el ancho cuando sea posible:
.adaptive-box {
width: 80%;
max-width: 500px;
margin: 0 auto;
}
- Considera el padding del contenedor al calcular anchos:
.container {
padding: 0 20px;
}
.centered-content {
width: calc(100% - 40px);
max-width: 800px;
margin: 0 auto;
}
El centrado horizontal con margin: auto
es una técnica fundamental en CSS que, a pesar de sus limitaciones, sigue siendo relevante en el diseño web moderno. Entender cuándo usarla y cuándo recurrir a alternativas más potentes te permitirá crear diseños más flexibles y robustos.
Ejercicios de esta lección Rellenos y márgenes
Evalúa tus conocimientos de esta lección Rellenos y márgenes con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender la diferencia entre padding y margin y su impacto en el diseño.
- Aprender a controlar el padding y margin de forma individual y mediante shorthand.
- Entender el fenómeno del colapso de márgenes verticales y cómo gestionarlo.
- Conocer las limitaciones y usos prácticos de la propiedad margin: auto para centrar elementos horizontalmente.
- Aplicar buenas prácticas para el uso de padding, margin y centrado en diseños responsivos y accesibles.