Aplicando la Propiedad PADDING

Con esta palabra se especifica el margen que ha de existir entre el borde definido antes y el propio contenido del DIV. Es decir, es un margen desde la línea de borde hacia lo que hay dentro. Podemos especificar el valor del padding así: bartolo {padding:10px 20px 30px 40px} que corresponden a las distancias a dejar arriba, a la derecha, abajo y a la izquierda respectivamente. Para acordarte, recuerda que empieza por arriba y va girando en sentido de las agujas del reloj (arriba, derecha, abajo e izquierda, fácil, no?). Es decir, si dejamos un padding de 2px 2px 2px 2px aparecerá un margen entre el borde y lo que haya en el interior de la capa de dos pixeles.

Vamos a aplicarlo a nuestro ejemplo. Vamos a hacer que entre los recuadros de bartolo y catalina, y el marco grande de global, quede un espacio pequeño de margen, de unos 2 pixeles. Recuerda, ese será el margen entre el contenido de la capa (bartolo y catalina) y el borde de global. El contenido de estilo.css ha de quedar así:

body {background-color:yellow ;}
#global {background-color:#FF9900; border:#000 1px solid; margin:4px 4px 4px 4px; padding:2px 2px 2px 2px}
#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}

Y el resultado será este. El resultado no es espectacular en este caso pero es importante saberlo, te hará falta más tarde. Al menos verás como los DIVs se han separado un poco (2 pixeles exáctamente) del borde de global.