Saltar al contenido principal
Codigo Heroe
Tarea anterior
Distribución general de la página7/18
A la lista de tareas
  1. 1. El modelo de cajas
  2. 2. El flujo
  3. 3. La distribución y el diseño de referencia
  4. 4. La propiedad display: tipos de caja
  5. 5. grid-template-columns: la plantilla del contenedor grid
  6. 6. La propiedad padding: el relleno
  7. 7. La propiedad margin: los márgenes
  8. 8. fr: una fracción del espacio disponible
  9. 9. La propiedad gap: espacio entre elementos grid
  10. 10. Terminamos la primera página
  11. 11. Usamos flexbox
  12. 12. La propiedad width: el ancho del elemento
  13. 13. justify-content: distribución en el eje principal
  14. 14. Márgenes automáticos
  15. 15. Agregamos un contenedor
  16. 16. Creamos columnas en el pie de página
  17. 17. Distribuimos las columnas del pie
  18. 18. Alineamos un elemento en vertical
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

La propiedad margin: los márgenes

Ya agregamos relleno al encabezado, pero todavía queda espacio libre por fuera. ¿De dónde sale?

Muchos navegadores actuales agregan márgenes de 8px a los cuatro lados de <body>. El margen es el espacio entre el límite exterior de un elemento y su elemento padre o los elementos vecinos.

Esquema del margen

Los márgenes se controlan con margin. Como padding, tiene una forma abreviada y propiedades individuales.

/* Forma abreviada */
margin: 20px;

/* Propiedades individuales */
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;

margin-top define el margen superior; margin-right, el derecho; margin-bottom, el inferior; y margin-left, el izquierdo.

No hace falta escribir las cuatro propiedades. Si solo necesitamos márgenes en uno o varios lados, basta con usar las propiedades correspondientes.

En el diseño, <body> no tiene márgenes, así que los quitaremos de la página. La siguiente caja principal, la lista de ventajas, también tiene espacios que debemos ajustar. Está marcada con <ul>. Los navegadores agregan márgenes y relleno a las listas no ordenadas, y tendremos que redefinirlos.

Primero quitaremos los márgenes de <body>. Después usaremos la clase features-list para dar estilos a la lista: pondremos en cero sus márgenes superior e inferior y agregaremos 20px de relleno a cada lado.

Diseño de la lista de ventajas

Cuando una propiedad tiene el valor cero, normalmente se omite la unidad de medida.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="food-decorative.css"> <link rel="stylesheet" href="food-outline.css"> <link rel="stylesheet" href="style.css"> <title>Comida sana a domicilio</title> </head> <body> <header class="page-header"> <a class="logo"> <img src="img/food_logo.svg" alt="Logotipo de comida sana a domicilio" width="160" height="160"> </a> <h1 class="header-title">Comida sana a domicilio</h1> </header> <main class="page-main"> <ul class="features-list"> <li class="feature"> <h2>A diario</h2> <p>Entregamos menús todos los días de 6:00 a 22:00, incluidos fines de semana y días festivos.</p> </li> <li class="feature"> <h2>Variedad</h2> <p>Los platos no se repiten en seis meses. Nuestro creativo chef sabe sorprender.</p> </li> <li class="feature"> <h2>Saludable</h2> <p>Cada plato tiene el equilibrio ideal de vitaminas, minerales y micronutrientes.</p> </li> <li class="feature"> <h2>Seguridad</h2> <p>Tratamos los alimentos y los envases con todo cuidado.</p> </li> <li class="feature"> <h2>Suficiente</h2> <p>Elige entre menús de 1200, 2000 y 2800 kcal. Nadie se ha quedado con hambre.</p> </li> <li class="feature"> <h2>Económico</h2> <p>Cuesta la mitad que cocinar en casa.*</p> <p class="disclaimer">* Aunque no es seguro.</p> </li> </ul> </main> <footer class="page-footer"> <span class="copyright">© 2020 Todos los derechos reservados</span> </footer> </body> </html>
CSS
.page-header { display: grid; grid-template-columns: 210px 200px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 20px; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Crea una regla para la etiqueta body.
    2. Quita el margen predeterminado de la página: margin: 0;.
    3. Crea una regla para la clase features-list.
    4. Pon en cero los márgenes margin superior e inferior de la lista.
    5. Agrega 20px de relleno a todos los lados de la lista.
    Codigo Heroe

    © 2023-2026, codigoheroe.com