====== Desarrollo Web Lección 5 - Diseño ======
===== Relleno y Márgenes =====
==== Objetivo ====
En esta actividad probaremos algunas herramientas para hacer que la página sea más atractiva y legible introduciendo algunos espacios.
==== Configuración ====
* 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.
* [[http://localhost/webdev/code/layout/1/es.php|layout.html]]
* [[http://localhost/webdev/code/layout/1/style.php|style.css]]
==== Relleno ====
* 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