Los márgenes, los paddings, las flotaciones

Márgenes, padding, flotaciones, todo da igual, usamos las propiedades de modo instintivo, probando con una o con otra, agregando valores, disminuyéndolos o aumentándolos pero llega un momento en que todos esos pequeños ajustes se vuelven inmanejables.

En el CSS no hay propiedades malas y propiedades buenas, lo que deberíamos hacer para no complicarnos es entender las diferencias entre ellas porque a veces parecen ser los mismo pero no lo son.

En estos ejemplos se usa margin y se usa padding ... aparentemente, el resultado es el mismo:

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

este DIV no tienen ningún estilo definido.

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

lo separo con margin:30px 0

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

lo separo con padding:30px 0

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

Parecen iguales pero no lo son. Es fácil de ver la diferencia si le agregamos un borde:

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

este DIV no tienen ningún estilo definido.

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

lo separo con margin:30px 0

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

lo separo con padding:30px 0

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

Lo mismo pasaría si les agregáramos un fondo.

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

este DIV no tienen ningún estilo definido.

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

lo separo con margin:30px 0

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

lo separo con padding:30px 0

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

La propiedad margin, separa TODA la etiqueta de la que está arriba y de la que está abajo; en cambio, la propiedad padding, separa el contenido de la etiqueta de sus propios bordes es decir, cambia su tamaño haciéndola más ancha o más alta.

Como esto suele aplicarse a elementos de bloque (etiquetas P, DIV, etc), a menos que lo indiquemos expresamente, el ancho que ocupará será el mismo que el rectángulo que la contiene así que si queremos darle un ancho diferente, debemos usar la propiedad width a la que le ponemos un valor, por ejemplo: width:300px;

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

este DIV tiene definido el ancho.

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

lo separo con margin:30px 0

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

lo separo con padding:30px 0

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

Si tiene un ancho definido, podemos centrarla usando los márgenes; para eso, establecemos el valor a derecha e izquierda con la palabra auto: margin: 30px auto;

lo centro con margin:0 auto

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

lo centro y lo separo con margin:3px auto

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

lo centro, lo separo y le coloco padding

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

El problema que surge muchas veces al tratar de centrar algo, es que el elemento que queremos centrar, se encuentra dentro de otros y esos otros tambien tienen márgenes o paddings por lo tanto, todo se tergiversa y ahí, suele recurrirse a márgenes negativos o cosas raras cuando, en realidad, bastaría poner todo a cero y eliminar esos valores innecesarios:

<div>
  <div style="padding-left: 80px;">
    <div style="margin-left: 100px;">
      <div style="margin:30px auto;padding:30px;width:300px;;">el div que quiero centrar y no se centra</div>
    </div>
  </div>
</div>

el div que quiero centrar y no se centra

Otro problema es el que surge cuando usamos flotaciones (propiedad float) que es muy útil pero tiene sus bemoles:

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

lo centro, lo separo, le coloco padding y agrego float:left

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

Como se ve en el ejemplo, el texto inferior se ha ido de paseo y se muestra arriba en lugar de abajo. No, no hay error, lo que hace float es exactamente eso, cambia el flujo normal de las etiquetas (una debajo de la otra) y si queremos que lo de abajo permanezca abajo, a esa última debemos agregarle la propiedad clear:both; para indicar que de ahí en adelante, todo vuelve a la normalidad:

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

si usa float:left no puedo centrarlo de manera automática

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

Además, si usamos float, la palabra auto deja de tener efecto así que la etiqueta no se centrará y para hacerlo, no queda otro remedio que usar margin-left, calculando el valor con un poco de aritmética; algo así:

valor de margin-left = ((width contenedor - width contenido) / 2) - padding del contenido - border-width del contenido

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.

si usa float se debe centrar con margin

Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.