Aplicando la Propiedad Margin

Con esta palabra se puede especificar el margen que ha de existir entre el borde exterior que separa el DIV del resto de elementos que lo rodean por fuera y el borde dibujado (opcional) del mismo. Mira este dibujo para entender lo que te digo:

ejemplo del curso de html css y capas div

Podemos especificar el valor del margen así: bartolo {margin:10px 20px 30px 40px} que corresponde a los márgenes que se dejarán por arriba, a la derecha, abajo y a la izquierda respectivemante, no olvides este orden! Lo de px significa Pixeles, que son cada uno de los puntitos en los que se divide la pantalla. Hay otras medidas pero esa es la buena.

Vamos a hacer una prueba escribiendo varios valores distintos para bartolo, catalina y global a ver que ocurre. Por ejemplo, vamos a escribir unos valores en la hoja de estilos estilo.css. Con lo que ya hemos escrito antes en ella debe quedar así:

body {background-color:yellow}
#global {background-color:#FF9900; border:#000 1px solid; margin:4px 4px 4px 4px}
#bartolo {background-color:#00CC00; border:#000 1px solid; margin:0px 0px 0px 0px}
#catalina {background-color:#00CCFF; border:#000 1px solid; margin:0px 0px 0px 0px}

Tras escribir eso guarda la hoja de estilo y abre la página index.html. Verás el efecto que produce. He puesto que global deje un margen de 4 pixeles arriba, abajo y a los lados.