Float, margin y padding.

Una vez que ya sabemos como crear nuestras capas CSS, lo segundo que tenemos que saber es como posicionarlas en nuestra página y cómo posicionar los contenidos dentro de ellas.

La propiedad float nos permite posicionar nuestras capas a un lado u otro de nuestra página o del div dentro del que se encuentra nuestra capa. Básicamente admite dos posiciones, derecha e izquierda, aunque no solo esto, ya que se existen otras opciones que aquí no contemplaremos y que están vinculadas a las relaciones con otras capas adyacentes.

float: left;
float: right;

#unico{
    float: right;
    font-family: verdana;
    width: 50%;
    border:3px solid #000; 
}

La propiedad margin establece la distancia de una capa con respecto a otras o a los márgenes de la capa que la contiene. Esta propiedad puede recibir hasta cuatro parámetros:

margin: 12px; // 12 píxeles en todas las direcciones
margin: 2px 4px 6px 8px; // arriba derecha abajo izquierda

También podemos referirnos a cada margen de manera específica de la siguiente forma:
margin-top        superior
margin-right    derecho
margin-bottom    inferior
margin-left        izquierdo

margin-top: 5px; // 5 pixeles en la parte superior

La propiedad padding establece la distancia entre el contenido de una capa y sus bordes, es como los márgenes de un documento impreso, siendo el borde los laterales de la hoja impresa. Esta propiedad y margin se confunden con mucha frecuencia, pero son muy diferentes. Mientras que margin se refiere a la distancia con otras capas, padding se refiere a la distancia del contenido con los borde de la propia capa.

A parte de la diferencia mencionada, por lo demás, pueden recibir los mismos valores:

padding: 12px; // 12 píxeles en todas las direcciones
padding: 2px 4px 6px 8px; // arriba derecha abajo izquierda

También podemos referirnos a cada margen de manera específica de la siguiente forma:

padding-top        superior
padding-right        derecho
padding-bottom        inferior
padding-left        izquierdo

padding-top: 5px; // 5 pixeles en la parte superior

las propiedades margin y padding admiten tanto valores positivos como negativos, lo que permite por ejemplo, la superposición parcial o total de capas. También admite diferentes unidades de medidas: px, em, rem y porcentajes.

Así la propiedad margin nos permite centrar capas horizontalmente de la siguiente manera:

#unico{
    margin: 0% 10% 0% 10%;
    font-family: verdana;
    width: 80%;
    border:3px solid #000; 
}

La lógica de lo que hemos hecho es simple. Hemos asignado a la capa una anchura del 80%, y hemos asignado un 10% de margen a cada lado, completando así el 100%.

Asignando solo a un lado, en este caso al izquierdo, tendríamos el mismo efecto:

#unico{
    margin-left:10%;
    font-family: verdana;
    width: 80%;
    border:3px solid #000; 
}

Y con esto, nos despedimos hasta el próximo capítulo.