Todo lo que pones en una página va dentro de una caja. Un encabezado es una caja, una imagen es una caja y una columna también es una caja. La pestaña Caja es donde ajustas esa caja: su tamaño, espaciado, borde, fondo y posición.
Actualizado el
El relleno es el espacio dentro de la caja, entre el contenido y el borde. El margen es el espacio fuera de la caja, entre ella y sus vecinos.
Si añades relleno a un botón, el botón crece alrededor de su texto. Si añades margen, el botón mantiene su tamaño y se aleja de lo que lo rodea.
Una forma rápida de recordarlo: el relleno empuja el contenido lejos del borde, el margen empuja la caja lejos de otras cajas.
Tamaño fija cuán ancho o alto es un bloque.
Auto deja que decida el contenido.
Elige un valor fijo como 16, o una fracción como 1/2, para un ancho exacto.
Completo ocupa el espacio disponible.
Una columna usa multiplicadores en lugar de un ancho fijo, de 2× a 12×. Así obtiene una parte mayor de la fila.
La mayoría de los bloques se ven mejor en Auto o Completo. Usa tamaños fijos cuando necesites una medida exacta, como un icono pequeño o un banner.
El cuerpo de la página y las secciones tienen un control de Ancho de contenido. Evita que el texto se estire por una pantalla muy ancha. Grande es un buen valor por defecto. Los anchos más pequeños van mejor para párrafos largos.
El ancho de contenido es distinto del Tamaño. El Tamaño cambia el bloque. El ancho de contenido cambia cuánto espacio puede usar el contenido de dentro del bloque.
El relleno de fondo fija el fondo. Puedes usar un color sólido o un degradado.
Los degradados pueden ser lineales, radiales o cónicos. Puedes cambiar el ángulo, añadir paradas de color y ajustar el color intermedio. Úsalos con moderación en áreas grandes; un degradado fuerte detrás del texto puede hacer más difícil leerlo.
El borde añade una línea alrededor de la caja. Puedes fijar el ancho, el color y el estilo, y elegir si se aplica a todos los lados o a uno a la vez.
El radio redondea las esquinas. Un radio pequeño suaviza una tarjeta. Un radio grande crea una forma de píldora. Los botones y las tarjetas suelen verse mejor con un radio que encaje con el resto del sitio.
La sombra añade profundidad. Puedes elegir un preajuste o ajustar la posición, el desenfoque, la extensión y el color. Las sombras exteriores levantan un bloque de la página. Las sombras interiores lo hacen parecer hundido.
La opacidad hace que todo el bloque sea parcialmente transparente. Esto también afecta a su texto y a sus hijos, así que úsala con cuidado. Un bloque de texto tenue es difícil de leer.
El menú de dispositivo de la barra de herramientas cambia dónde se aplica un estilo. Escritorio se aplica en todas partes. Tableta se aplica a tableta y a tamaños menores. Móvil horizontal se aplica a los dos tamaños de móvil. Móvil vertical se aplica solo a los teléfonos más pequeños.
Configura primero el aspecto de escritorio, luego cambia a un dispositivo menor y modifica solo lo que necesite ser distinto. Lee Diseño adaptable para la explicación completa.
La posición es avanzada. La mayoría de los bloques deberían quedarse en Estático, lo que significa que van en el flujo normal de la página.
Las otras opciones sirven para efectos concretos:
Relativa desplaza un bloque de su sitio normal pero conserva el espacio que ocupaba.
Absoluta separa un bloque y lo ancla a un padre. Normalmente el padre tiene que estar en Relativa primero.
Fija fija un bloque a la ventana del navegador, así que se queda en su sitio mientras la página se desplaza.
Pegajosa mantiene un bloque a la vista hasta que su contenedor pasa de largo.
La posición puede volver una maquetación frágil en pantallas pequeñas. Revisa las vistas de tableta y móvil después de usarla.
La disposición aparece en los bloques que usan una maquetación flexible. Controla la dirección, la alineación y el ajuste de los hijos. Las filas construidas con columnas ya cubren la mayoría de las necesidades de maquetación.
El espacio fija la separación entre hijos en una fila, una columna u otra maquetación agrupada. Normalmente el espacio es mejor opción que añadir margen a cada hijo.
Para una tarjeta:
Añade una sección o una columna.
Dale un relleno de fondo y un radio pequeño.
Añade relleno, de unos 24 a 40 píxeles.
Añade una sombra sutil si la tarjeta necesita destacar.
Mete dentro el encabezado, el texto y el botón.
Después revísala en el móvil. Si la tarjeta se siente apretada, reduce el relleno o el tamaño del encabezado.
Un creador de sitios web que funciona como un documento. CMS, formularios y alojamiento en la UE incluidos.
© 2026 Remake. Todos los derechos reservados.
