/* Clase que afecta al primer DIV */
.hola {   
	width: 200px;
	/* height: 100px;  */
	border: 1px solid black;
	margin: 20%;	/* se puede poner en cualquier tipo de medidas */
	margin:20px;  	/* 20px en todos los márgenes */ 
	padding: 10px;	/* lo mismo para el padding */
	background-color: magenta;
}

/* 	Para separar elementos se utiliza el margin */

/* 	El padding sirve para dar más grosor a los elementos 
	Por ejemplo para dar mayor espacio al area del click de los enlaces */

/* 	Para saber inicialmente el área que ocupa un elementos es recomendable
	darle un borde, aunque posteriormente se lo quitemos */

p {
	margin: 30px 20px; /* arriba y abajo -- izquierda y derecha */
	text-align: center;
	font-size: 1.5em;
	border: 1px solid black;
	background-color: green;
	padding: 5px;
}

/* Identificador que afecta al segundo DIV */
#caja {
	width: 50%;  /* Ocupa el 50% de espacio de ancho respecto a su contenedor */
	height: 100px;
	border: 5px solid black;
	/* se puede establece un mínimo y máximo de tamaño */
	min-width: 250px;
	max-width: 400px;
	/* orden de parámetros */
	margin: 20px 50px 100px 30px;  	/*arriba-derecha-abajo-izquierda*/
	margin-bottom: 100px;			/* se puede especificar para cada margin o padding */
	margin-top: 20px;
	margin-left: 30px;
	margin-right: 50px; 	
	background-color: white;
	padding: 5%;
}