margin VS padding (again) : Vagabundia

Suele haber alguna confusión respecto a las diferencias entre las propiedades margin y padding. Es cierto que a veces parecen ser lo mismo o dar el mismo resultado pero son absolutamente diferentes y deben ser usadas adecuadamente para evitar problemas u obtener un resultado correcto (más información).

Un ejemplo donde colocamos dos rectángulos, uno dentro de otro. El exterior tendrá un color de fondo y el interior otro:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="width: 100%;">
  <div style="padding: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
</div>

El ancho del rectángulo exterior es 100%, ocupa todo el ancho disponible, dependiendo de dónde esté, será más corto o más largo. El ancho del rectángulo interior es fijo y tiene un valor cualquiera; además tiene agregada la propiedad padding que hace que eso que está dentro de él, se separe de los cuatro bordes.

Si en lugar de padding usáramos margin, el resultado no sería el mismo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="width: 100%;">
  <div style="margin: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
</div>

La diferencia entre ambas propiedades podría resumirse así: margin actua hacia afuera, separa el rectángulo de aquel otro que lo contiene; padding actua hacia adentro, separa el contenido de ese rectángulo de sus propios bordes.

Pero ¿no lo separa de abajo ni de arriba? Lo hace, pero no lo vemos. Para que el margen sea visible sobre los cuatro lados, el DIV contenedor debe "flotar":

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="margin: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
</div>

Entonces, si quisiera separar el rectángulo del contenedor y además, separar el contenido, debería usar ambas propiedades:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="margin: 30px; padding: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
</div>

Bien. Ahora podemos agregarle un segundo rectángulo y les ponemos la propiedad float a todos ellos así los vemos juntos:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="float: left; margin: 30px; padding: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
  <div style="float: right; margin: 30px; padding: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
</div>

Uno, flota hacia un lado y el otro flota hacia el otro.

Ahora vamos a tratar de verlo con un ejemplo práctico sobre el que muchas veces me han preguntado. Imaginemos que tenemos un rectángulo (un DIV) del que desconocemos su ancho (o varía) y queremos incluir en su interior varios rectángulos más con cierto contenido y que se muestren del mismo tamaño. Por ejemplo, que quede algo como esta imagen:

Pongamos entonces cuatro rectángulos a los que les damos un ancho fijo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
</div>

Obviamente, si quedan bien será un milagro ya que desconocemos los tamaños pero, nos queda la aritmética así que pensamos, bueno, dividamos el total en cuatro partes iguales y en lugar de colocar un valor absoluto para width, usemos porcentajes (25%):

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
</div>

No funciona ¿Qué pasa?

Es que el ancho de width no incluye el padding, así que se lo saco y sólo dejo margin:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Seguimos en la misma. Entonces, le saco margin y dejo padding:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Vemos que uno hace una cosa y otro hace otra pero ninguno resuelve el problema así que le quito ambos:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="float: left; width: 25%;"> ... </div>
  <div style="float: left; width: 25%;"> ... </div>
  <div style="float: left; width: 25%;"> ... </div>
  <div style="float: left; width: 25%;"> ... </div>
</div>

No es lo que quiero pero al menos ahora está dividido en partes iguales.

Esto es lo fundamental: el ancho es el definido por width + border + padding + margin con ciertas variantes según sea el navegador pero cada una de esas propiedades, hace que el rectángulo sea cada vez más grande así que hay que recurrir a la solución mágica para la mayoría de los problemas de este tipo. Si no podemos alinear un DIV, pongámoslo en otro.

Yo quiero que esos rectángulos interiores se vean con estas características, que se separen entre si y que el contenido también se separe:

<div style="margin: 10px; padding: 10px;"> ... </div>

Así que debo meterlos dentro de otros que son los que flotarán y que medirán el 25% del ancho total:

<div style="float: left; width: 25%;">
  <div style="margin: 10px; padding: 10px;"> ... </div>
</div>

Por último, meteré todo eso en el primer rectángulo:

<div style="width: 100%; float: left;">
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
  </div>
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
  </div>
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
  </div>
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Si quiero distribuirlos de manera pareja, en lugar de colocar en todos ellos un margen igual para los cuatro lados, coloco un margen derecho igual a 0 en los tres primeros:

margin: 10px 0 10px 10px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

La propiedad margin me permite ubicarlos sin problemas, más arriba o más abajo si fuera necesario.

La propiedad padding me permite manejar el contenido sin que cambien los anchos y nada se descoloque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

20 comentarios:

Gem@: No hay palabras sólo admiración :)
Anónimo: Hola alguien sabe donde puedo alojar archivos FLV con un peso de 307 MB
Admin: Una clase magistral!!! (el detergente no ehh) Excelente JM!! Genial!! Como dice gem@ no hay palabras, tengo que guardarme esto en algún lado porque se que me voy a olvidar...
Y siempre se me hace un lío tremendo, confundo el padding con el margin y no sabía para que era ni el uno, ni el otro, ahora me quedó clarísimo, pero me voy a olvidar... ya me conozco...
Gracias!! ;)
Admin: Hablando de bueyes perdidos... me desapareció el favicón de FolkTango otra vez!
Tengo el código en la plantilla en tres lugares diferentes, (le agregué otro mas por las dudas) ya la revisé por si en su lugar o cerca Blogger me hubiera puesto su icono y no, no me ha puesto nada, mi código lo tengo, pero el favicón no está... será como el Unicornio de Silvio? Tendré que cantar a ver si alguien lo ha visto?
Mi favicón azul se me perdióóóóó´, si alguien sabe de el, si tiene información... ja jaaaaj jaaaa :D Estas horas me pegan mal ja ja jaa...
Emerald: jajaja esta K-nelita siempre increíble!
JMiur otra preguntita :P estos datos del padding y margin, difieren en IE y firefox? porque yo puse mi título de blog con paddin y margin para tener letras encimadas(truquito de Pizcos)y en fire me sale bien y en su lugar (izquierda) pero en IE se ve al centro y como tienen margin llegan casi a la derecha. :o
Anónimo: J es una clase de yoga??? jajaja, actúa hacia afuera...actúa hacia adentro...excelente!!! lo guardaré, no tenía en cuenta lo que nos enseñas, por eso tal vez hago algunos desastres.
Hoy tenemos que buscar el favicón azul de Nelita???...allá vamos Mar del Plata, vienes???, llevo nuestros criollitos y armamos una mateada...besitos!!!
Anónimo: Hola. JMiur, tengo una duda, si me la puedes explicar...Como puedo poner varios widgets seguidos en el pie de página???? Por ejemplo, poner todos los banners seguidos en el mismo pie de página..Gracias y un saludo...

www.elrastreador.com
Esteban: Excelente!!!

Yo hace poco lo habia entendido pero tu explicación me lo dejó mucho más claro.

Un aplauso!!
Anónimo: oye :D que buena explicación! muy completo el articulo!
Anahí: Genial. Estas son cosas que uno (yo) "cree" que sabe, pero cuando las va a aplicar tiene que recurrir a un tutorial como este. :-p
Salute.
Mon: Muchas gracias por "esta casual entrada" que me ha ayudado a solucionar un error ( de muchos que hay) en mi plantilla blogger.

Pues es justo lo que necesitaba!!
Esta entrada es complicada de comprender para una usuaria "aprendiz" pero gracias a uno de sus enlaces, he podido solucionar el problema.

Soy autodidacta en blogger gracias a vuestra ayuda y por compartir tantos trucos....

besos y gracias!!!!

(me da miedo ir a un lugar donde me digan los errores de mi plantilla jeje...es como ir al dentista!!!)
JMiur: Me alegro que les sea útil :D

k_nelita: Parece que el favicon ha desaparecido en serio (se habrá ido de vacaciones) porque si quiero verlo, Blogger/Picasa me dice que la URL no existe. Vas a tener que subirlo otra vez y cambiarla a menos que esa URL esté equivocada.

Luz: El concepto es el mismo en todos los navegadores lo que ocurre es que ambos, miden las cosas de diferente manera y allí surgen los problemas. Trataré de mostrarlo en alguna entrada futura.

En el caso de los títulos de tu blog, el problema es otro. Creo qeu los solucionarías agregando esto en el estilo:
#HTML18 {float: left;}

emigasei67: La idea sería la misma que la de esta entrada, tendría que ver el ejemplo concreto.

difistinto: todos somos autodidactas, todas las plantillas tienen errores y todos sufrimos con los dentistas :D
Emerald: JMiur, yo alguna vez te dije que sos un genio????:P
dos palabritas y solucionado el problema! y no es la primera vez que me solucionas mis enredos de plantilla :D
GENIO GENIO GENIO!! te merecés un abrazote de oso!Muchas gracias maestruli!!!!!
Admin: Mi favicón azul ya volvió ja jaaaa :D
Tenías razón JM, por alguna misteriosa razón la imagen ya no estaba en Blogger-Picasa, la tuve que subir de nuevo y mi unicor... favicón azul volvioooooó, aaaaleluya...

Gracias :D
Anónimo: JMiur, me refiero como lo tienes en tu blog al final de página, todos los banners ordenados (bloglines, blogalaxia, etc) Supongo que me servirá este post para solucionar mi duda. Gracias y un saludo.....

www.elrastreador.com
Anónimo: Amigos una pregunta porfa, donde puedo alojar archivos FLV con un peso de 307 MB??
JMiur: Un beso, Luz, me alegro que funcionara, era una pena que no lo hiciera en IE porque es has hecho blog muy bello.

Felicidades k_nelita. Habra que ponerle una cadena a ese favicon rebelde ¿por qué se habrá borrado? Eso es raro.

emigasei67: Entiendo. En ese caso sólo hice una tabla pero podría ser un DIV centrado y las imágenes simplemente estan una al lado de la otra porque como tienen el mismo tamaño, se acodan solas:
<a href="..."><img src="..." /></a>
<a href="..."><img src="..." /></a>
<a href="..."><img src="..." /></a>
etc etc.

Julian: Creo que Photobucket es una posibildidad, otra es SkyDrive.
Emerald: :$ JMiur gracias!que el gran maestro me diga que tengo un blog bello me llena de orgullo.:D
Anónimo: JMiur, está resuelto..Puedes echarle un vistazo y gracias....:D...Por cierto Felices Fiestas a todos...

www.elrastreador.com
JMiur: Me alegra que lo resolvieras :)

¿Quiere dejar un comentario?

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

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 ...

Vagabundia

margin VS padding (again)

20 comentarios:

¿Quiere dejar un comentario?

entradas relacionadas

la puerta abierta

las etiquetas

Páginas