Las cajas Div

Ya mencionamos que los Div en Html son cajas, ahí la importancia de este elemento para comenzar a modificarlo.

Css nos permite cambiar el alto, ancho, posición, margenes, etc de las cajas Div. Antes de entrar de lleno en la modificación de este elemento tenemos que comprender algunas definiciones básicas.

En la siguiente imagen se puede comprender mejor:

Resultado de imagen

Un “div”, que es una caja, tiene un margen el cual es externo a la caja, nosotros podremos colocar margenes tanto arriba, izquierda, derecha y abajo de la caja, si colocamos un fondo de color a nuestro “div”, el margen no se pintará.

El borde de la caja con Css podremos modificarlo tanto en su ancho, visualización, estilo, etc. Lo analizaremos en mayor detalle en las secciones siguientes. Por defecto el borde no se visualiza.

El padding es un relleno interno y se modifica de la mima manera que el margen, aquí el contenido se verá afectado dentro de la caja y se desplazará en su interior según como lo modifiquemos.

En el video podrás ver una explicación visual y comprenderás mejor como funciona cada una de estas definiciones.

Html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Cajas Div</title>
	<link rel="stylesheet" href="div.css" type="text/css">
</head>
<body>
<div class="titulo">
	<h1>Título del sitio web</h1>
</div>
<div class="parrafo">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias labore ab dicta laborum velit optio eius, dolorum illum impedit minus amet laudantium iste ipsa, totam dolores, consequuntur repudiandae reiciendis assumenda.</p>
</div>
<footer>
	<p>Sitio web desarrollado por www.IgnacioGutiérrez.cl</p>
</footer>
</body>
</html>

Css

*{
	margin:0;
}
.titulo{
	background-color: BlueViolet;
	margin: 20px;
}
.parrafo{
	background-color: crimson;
	padding-top: 50px;
	padding-left: 10px;
	padding-bottom: 60px;
	padding-right: 300px;
}
footer{
	background-color: GoldenRod;
	padding: 10px 20px 30px 40px;
	margin: 10px 200px;
}

Un dato importante es que los “div” por defecto se irán posicionando hacia abajo del sitio web, independiente del ancho que nosotros le coloquemos. Si queremos cambiar la posición por defecto tendremos que comprender las definiciones de float y position que analizaremos en el siguiente apartado.