Las preguntas que involucran a padding y margin siguen siendo las más comunes porque hay una tendencia a suponer que son lo mismo y eso, en realidad no es cierto.
Si muestro este ejemplo, uno diría ... es lo mismo porque parecen lo mismo. En ambos casos, en una etiqueta cualquiera, hay otra, un párrafo sencillo. El de la izquierda tiene establecido un margen, el de la derecha, un padding; en ambos casos, el valor es 20:
Si muestro este ejemplo, uno diría ... es lo mismo porque parecen lo mismo. En ambos casos, en una etiqueta cualquiera, hay otra, un párrafo sencillo. El de la izquierda tiene establecido un margen, el de la derecha, un padding; en ambos casos, el valor es 20:
<p style="margin: 20px; padding: 0;">un ejemplo</p> <p style="margin: 0; padding: 20px;">un ejemplo</p>
un ejemplo
un ejemplo
Para ver que no son lo mismo, a esas mismas etiquetas les agregaremos algo más, por ejemplo, un color de fondo:
un ejemplo
un ejemplo
Como se ve ahora, la diferencia es notable; lo mismo ocurriría si le pusiera un borde, etc.
La clave de todo, es entender que una etiqueta es un rectángulo que tiene un cierto tamaño. Ese tamaño, está dado por sus dimensiones si es que las hemos establecido con height y width o bien por su contenido; es decir una etiqueta es un rectángulo que tiene un tamaño igual a su contenido, sea este una imagen o un texto.
Con margin, separamos ese rectángulo de aquellos otros rectángulos que lo contienen o que son adyacentes pero, el rectángulo en si mismo no varía, sigue midiendo lo mismo.
Por el contrario, padding aumenta el tamaño de ese rectángulo, crea espacios alrededor de este y por eso, cuando le ponemos un fondo en el ejemplo de la derecha, ese color abarca un rectángulo mayor.
margin es un valor hacia afuera y padding es un valor hacia adentro
Esa es la razón por la que podemos usar márgenes negativos para desplazar algo hacia arriba o hacia la izquierda pero, no podemos usar paddings negativos.
La clave de todo, es entender que una etiqueta es un rectángulo que tiene un cierto tamaño. Ese tamaño, está dado por sus dimensiones si es que las hemos establecido con height y width o bien por su contenido; es decir una etiqueta es un rectángulo que tiene un tamaño igual a su contenido, sea este una imagen o un texto.
Con margin, separamos ese rectángulo de aquellos otros rectángulos que lo contienen o que son adyacentes pero, el rectángulo en si mismo no varía, sigue midiendo lo mismo.
Por el contrario, padding aumenta el tamaño de ese rectángulo, crea espacios alrededor de este y por eso, cuando le ponemos un fondo en el ejemplo de la derecha, ese color abarca un rectángulo mayor.
margin es un valor hacia afuera y padding es un valor hacia adentro
Esa es la razón por la que podemos usar márgenes negativos para desplazar algo hacia arriba o hacia la izquierda pero, no podemos usar paddings negativos.
En todos los navegadores, esto se verá como un rectangulo de 500 pixeles de ancho:
<div style="background-color:#FFF;margin:0 auto;width:500px;"></div>
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
Y si le agrego un borde de 10 pixeles, el rectángulo será mayor y medirá 520 pixeles de ancho:
<div style="background-color:#FFF;border:10px solid #6495ED;margin:0 auto;width:500px;"></div>
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
Y si le agrego un padding de 20 pixeles, el rectángulo será aun mayor y medirá 560 pixeles:
<div style="background-color:#FFF;border:10px solid #6495ED;margin:0 auto;padding:20px;width:500px;"></div>
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
La regla de oro es esta:
ancho = border-left + padding-left + width + padding-right + border-right
alto = border-top + padding-top + height + padding-botom + border-botom
alto = border-top + padding-top + height + padding-botom + border-botom
Pero el oro es uno de esos materiales impredescibles y esa regla es ... relativa ya que hay otra propiedad que la modifica de manera sustancial y es una regla que funciona en cualquier navegador moderno, incluyendo Internet Explorer 8.
Sabemos que las propiedades CSS tienen siempre un valor por defecto así que si no las colocamos, los navegadores usan esas definiciones. La gran mayoría de ellas, sobre todo las más sofisticadas, no influyen en nada, son siempre valores nulos o no nos damos cuenta de su existencia. Este es el caso de la propiedad box-sizing que tiene tres formas de sintaxis:
-moz-box-sizing: valor; en Firefox
-webkit-box-sizing: valor; en Chrome y Safari
box-sizing: valor; en IE 8 y Opera
El valor por defecto es una palabra: content-box que indica que el ancho y alto de algo no incluye bordes, paddings ni márgenes, sólo su contenido. Pero admite otro valor: border-box que establece que el ancho y alto incluyen al borde y al padding.
Dijimos que si esto mide 500 y le ponemos un borde de 10 pixeles, el rectángulo será de 520 pixeles:
Sabemos que las propiedades CSS tienen siempre un valor por defecto así que si no las colocamos, los navegadores usan esas definiciones. La gran mayoría de ellas, sobre todo las más sofisticadas, no influyen en nada, son siempre valores nulos o no nos damos cuenta de su existencia. Este es el caso de la propiedad box-sizing que tiene tres formas de sintaxis:
-moz-box-sizing: valor; en Firefox
-webkit-box-sizing: valor; en Chrome y Safari
box-sizing: valor; en IE 8 y Opera
El valor por defecto es una palabra: content-box que indica que el ancho y alto de algo no incluye bordes, paddings ni márgenes, sólo su contenido. Pero admite otro valor: border-box que establece que el ancho y alto incluyen al borde y al padding.
Dijimos que si esto mide 500 y le ponemos un borde de 10 pixeles, el rectángulo será de 520 pixeles:
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
Así que ahora le agregaremos la propiedad box-sizing con el valor border-box y el rectángulo tendrá los 500 pixeles que indica width; el borde será "interior":
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
Este detalle es particularmente útil cuando lo que hacemos es utilizar medidas como porcentajes ya que estos porcentajes no incluyen los bordes.
<div style="padding: 10px; margin:0 auto; width: 500px;"> <div style="margin:0 auto; width:100%;"> ....... el contenido ....... </div> </div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.
Fíjense qué pasa si le agrego un borde:
<div style="padding: 10px; margin:0 auto; width: 500px;"> <div style="border: 10px solid #6495ED; margin:0 auto; width:100%;"> ....... el contenido ....... </div> </div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.
Peor aún si le agrego un padding:
<div style="padding: 10px; margin:0 auto; width: 500px;"> <div style="border: 10px solid #6495ED; margin:0 auto; padding: 10px; width:100%;"> ....... el contenido ....... </div> </div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.
Todo se soluciona si establezco la propiedad box-sizing con el valor border-box:
<div style="padding: 10px; margin:0 auto; width: 500px;"> <div style="border: 10px solid #6495ED; box-sizing: border-box; margin:0 auto; padding: 10px; width:100%;"> ....... el contenido ....... </div> </div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.
23 comentarios:
Lo malo es que el padding y margin en Internet explorer no es lo mismo :(.
Margin Y Padding no es lo mismo nunca, son propiedades diferentes. En todos los navegadores, el concepto es exactamente el mismo; uno separa los elementos de otroselementos y otro separa el contenido de sus bordes.
La diferencia, sobre todo con las viejas versiones de IE es la forma en que es tratado el tamaño de los objetos.
Si miras esta entrada en IE8 verás que se ve exactamente igual que se ve en Firefox o Chrome. Tal como dice la entrada, la última propeidad, sólo funciona en IE8 o superior.
Muy bien 10 con felicitado incluído, es un artículo para leer y volver a hacerlo, guardarlo! :P
Pero no es problema que se muestre en Explorer 8 y no en versiones anteriores porque ya sabemos que hay que actualizarlas.
Bueno, una propiedad más que no conocía la box-sizing :)
Hola JMiur, tenía un lío con estos conceptos, pero ahora me quedó más claro. Es muy didáctico para mí que utilices la idea de los rectángulos, gracias por este post.
No conocía la propiedad box-sizing, todos los días se aprende algo nuevo.
Al principio,cuando empece con el blog, cada vez que retocaba la plantilla la liaba parda, y todo por no entender bien estas propiedades. Muy interesante lo del box-sizing.
Graciela:
Vamos sumando :D
Gem@:
No, no es problema en absoluto. Actualizar navegadores es la regla si o si :D
Mabel:
Me alegro que te sea útil. Sí, básicamente todo lo que hay en una pa´gina web es un rectángulo y si lo vemos así, las cosas se aclaran muchisimo y se hacen más fáciles.
Vku:
Yo tampoco la conocía ni de nombre. Es interesante para usar cuando las medidas son porcentajes.
de gran utilidad estas propiedades ;)
Hola JMiur, espero te encuentres bien, me gustaría que por favor me ayudarás con algo que quiero hacer pero no se si sea posible, aunque creo que si se puede, como verás en mi blog suelo colocar en los post bastantes imágenes pero estás no siemtpre tienen las mismas dimensiones, por ejemplo supongamos que quiero añadir 10 imágenes en un post pero estás tienen tamaños distintos, claro yo se que modificando height="valor" width="valor" puedo lograr que todas adquieran el mismo tamaño, el problema es que algunas se deforman y se ven bastante mal, lo que me gustaría es que se pudiera mostrar sólo una parte de la imágen por ejemplo el centro, se puede crear una clase que me permita hacer eso? Creo que me expliqué bien ojala me entiendas.
Mil gracias por tu ayuda. :)
Veo que seguimos con la opinión de que los usuarios son los que tienen que actualizarse para que los programadores no tengan que calentarse mucho la cabeza. En eso creo que tardaré en estar de acuerdo, pero realmente me picó la curiosidad con otra cosa que creo no pusiste en la entrada ¿El motivo de que box-sizing funcione sólo para IE8 (entre otros) es que es CSS3?
Albus Dumbledore:
Eso es posible; por ejemplo, es lo que se usa en este blog en la página de inicio con los posts resumidos. En ese caso, l oque se debe hacer, no es colocar una etiqueta IMG sino cualquier otra y debe ser un bloque. En ella, la imagen se colcoa como fondo. Un ejemplo, suponiendo que las imágenes que quiero mostrar son de 200x200:
span.demo {
background:transparent url() no-repeat 50% 50%;
display:block;
height:200px;
overflow:hidden;
width:200px;
}
en un post, lo usaría así:
<span style="background-image:url(imagen_1);"></span>
<span style="background-image:url(imagen_2);"></span>
Otra alternativa par resolver las deformacions (dependerá del diseño gráfico, es, en lugar de usar width y height, usar max-width y max-height; de esa manera, se redimensionan sin deformarse auqnue no ocuparán todas el mismo espacio.
Oloman:
No, realmente no creo eso. Creo que los usuarios deben usar lo que les de la gana y los desarrolladores, idem. Lo que no creo que sea lógico es quejarse porque en el TV blanco y negro no se ven películas en color o que mi vieja vitrola de discos a pasta no reproduce DVDs. Yo puedo ser muy feliz con uno o con otro a menos que pretenda que una herramienta sea lo que no es y haga lo que no puede hacer.
En lo personal, no me molesta en absoluto si hay gente que aún usa Mosaic siempre y cuando sepan que hay cosas que no funcionarán y siempre y cuando no me obliguen a que yo deba adaptarme a ellos.
Sea cual sea, siempre diré que es mejor tener un navegador actualizado que uno desactualizado y, todos los que hay hoy disponibles, funcionan correctamente y sin grandes problemas aunque no hay ninguno de ellos que sea la panacea de nada porque el problema nunca son las herramientas sino quienes las utilizan.
Casi me olvido ... si, esa propiedad está definida dentro del proyecto del llamado CSS3 y los navegadores las aplican con diferencias sustantivas o con propiedades especiales ya que, en realidad, aún se siguen discutiendo. De hecho, cualquier propiedad que comience con el signo menos no es una propiedad del CSS3 sino una adpatacion de ese navegador a una posible regla que, imagino yo, alguna vez será común a todos ... o no ...
En realidad, casi aseguraría que no y que deberemos seguir lidiando con estas cosas siempre ... es más, no sé si eso es tan malo como parece :D
@JMiurJMiur hago exactamente lo que tu me explicas pero no logro que aparezca nada, ni imagen, ni miniatura ni nada, no se donde esta el error, si me pudieras explicar mejor. Dime que tengo que agregar a la plantilla y que tengo que agregar en los post.
Disculpa tanta molestía...
Eso que escribí es lo que debes agregar. Debería ver tu ejemplo para saber qué está equivocado.
No conocía ese box-sizing, me será útil JMiur!!
Huahuahua!
Como tu explicas las cosas ,trucos y tutoriais és lo miesmo qui ler espanhol,e pensar em alemão e falar portugues!
Perfeito!
Te amooooo!!!:)
Si te amooooo!:P
Saludos, Michael :D
Me ha ayudado mucho esta entrada con un div que tenía problemas. Gracias.
Sin duda, es un excelente artículo, me ha servido de mucho. Y ahora por fin puedo decir: ADIOS problemas de padding y margin. Gracias! :)
Saludos!!!!
Hooola, JMiur, estoy leyendo este post casi 3 años después... Pero siendo de mucha utilidad. Hay algo que aún no logro, y es que tengo un cuadro y dentro de él una imagen en su top, bajo la imagen hay un formulario de login. He utilizado border-radius para redondear las esquinas del cuadro; ahora: con el padding he tratado de que el relleno sólo cubra de la mitad de la imagen hacia abajo, pero no lo consigo... Si le doy al height lo hace pero del top de la imagen hasta la mitad superior; lo que yo quiero es todo lo contrario... ¿Ayudita? ¿Alguien? Se les agradece.
Tendrías que mostrar tu ejemplo porque dependerá de las reglas de estilo de los distintos elementos.
Excelente ...muchas gracias.
GENIOOO! Mil gracias por el aporte!
¿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 ...