Desarrollo Web Lección 5 - Diseño

Relleno y Márgenes

En esta actividad probaremos algunas herramientas para hacer que la página sea más atractiva y legible introduciendo algunos espacios.

Continuaremos con la actividad anterior, pero es de esperar que haya perdido el código final porque ha estado jugando con los elementos de posicionamiento. Si es así, reemplace su código con el siguiente código.
layout.html
style.css

Para ver cómo funciona el relleno, agreguemos algunos a nuestras secciones de contenido.

.contenido {
    background-color:coral;
    border:orangered solid 2px;
    height: 400px;
    padding: 40px;
}

Vea cómo nuestro texto ahora está más lejos de los bordes, lo que lo hace mucho más legible.

Márgenes

Podemos hacer algo muy similar con los márgenes. Agregue el siguiente código a '.contenido'.

    margin: 20px;

En lugar de agregar espacio dentro del borde naranja, 'margen' agrega espacio fuera del borde.
Si usa 'relleno' o 'margen' a menudo depende de los elementos circundantes y de cómo desea interactuar con ellos. También depende de los antecedentes que tenga.
Como regla general, la mayoría de los elementos requieren relleno, pero querrá separar las imágenes y todo lo que tenga un fondo único usando márgenes.
Dependiendo de su navegador, probablemente haya notado el espacio en blanco a la izquierda <nav> y arriba <heading>. Estos han sido causados por el posicionamiento predeterminado de los elementos. Vea si puede encontrar y arreglar esto usando el panel de modelo de caja de sus Herramientas de desarrollador.
También hay espacio entre <nav> y los otros elementos. Esto se debe a que usamos un 15% de ancho sobre <nav> y width: 16%;sobre los otros elementos. Cambie el ancho <nav> al 16% para arreglar esto.

Vimos la diferencia entre los elementos 'en línea' y 'bloquear' cuando modificamos nuestras listas para que fueran una barra lateral (block) y un menú superior (inline).
Los elementos de 'bloque' como divs no funcionan bien como elementos en línea, pero es posible colocarlos uno al lado del otro de la siguiente manera.

    display: inline-block;

Agregue esto a su CSS '.content' y verifique los resultados.
Como elementos de 'bloque en línea', llenarán la línea y luego pasarán a la siguiente línea cuando la primera esté llena. Intenta hacer los bloques más anchos para ver esto en acción.

    width: 450px;

Este ancho debería estirarlos hasta casi ocupar la pantalla. Luego puede desmaximizar la ventana y cambiar su tamaño para ver cómo responden los elementos.