JMiur [E]

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.

5 comentarios:

Manfenix  

Clarísima la explicación, como siempre.
Saludos JMiur, :)

Responder
CHiCken  

excelente explicacion e informacion, muy bueno en verdad

saludos!

Responder
Adrián J. Messina  

Éste es el tema que me cuesta aún, el %75 de los problemas los tengo con ubicar los divs, pero esto me ayuda mucho a entenderlo.
Gracias.

Responder
Céz  

Wow, siempre creí que eran iguales y no percibía la diferencia en ellas porque creí que padding era para cierta zona de la plantilla y margin para otra, jejeje :((

Estaba probando en mi blog asicious si podia situar la fecha de cada comentario al lado derecho; probé con Padding: 100px (puse 100 a ver cómo me resultaba), Margin-right=100px, Float: right ninguno me ha servido ni menos Text-align.

.comment-timestamp {
font-size:9px;
text-align: right;
}
Qué hice mal?
Gracias anticipadas :)

Responder
JMiur  

Poniendo em .comment-timestamp {}

padding-left: 100px;
o
margin-left: 100px;
los moverá 100 pixeles a la derecha.

poniendo:
float:right;
se verá a la derecha paero se descompaginará de ahí hacia abajo.

para alinear el texto, se le debe indicar eso al contenedor y no a su contenido así que sería:

#comments-block .comment-footer {
text-align: right;
}

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR