Parece que las propiedades margin y padding provocan alguna confusión. Si a eso le agregamos que su resultado es diferente según sea el navegador que se usa, el tema merece ser nuevamente tratado.
Estas son las propiedades:
Puede ser una longitud (positiva o negativa) un porcentaje o auto.
No admite valores negativos.
margin: superior derecho inferior izquierdo margin-top: | margin-right: | margin-bottom: | margin-left:Establece la cantidad de espacio entre un elemento y el elemento adyacente.
Puede ser una longitud (positiva o negativa) un porcentaje o auto.
padding: superior derecho inferior izquierdo padding-top: | padding-right: | padding-bottom: | padding-left:Establecen la distancia entre los bordes de un elemento y el área que lo contiene.
No admite valores negativos.
Hay cuatro áreas anidadas, el área del CONTENIDO es la que está en el interior y, hacia afuera, le siguen padding, border y margin.
Vamos a imaginar que hay un bloque dentro de otro bloque y, que en ambos, las propiedades margin y padding son 0px:
Vamos a imaginar que hay un bloque dentro de otro bloque y, que en ambos, las propiedades margin y padding son 0px:
<div style="background-color:oldlace;height:100px; ... "> /* EXTERNO */ <div style="background-color:tomato; ... "> /* INTERNO */ CONTENIDO ... </div> </div>Aquí hay una herramienta simple donde puede probarse qué significa cada propiedad. Cambien los valores de margin y padding para cada uno de los bloques, opriman el botón correspondiente y vean cómo actua cada propiedad en el navegador que están usando.
| Bloque EXTERNO | Bloque INTERNO | ||
CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO
15 comentarios:
EXCELENTE EXPLICACION DE LOS MARGENES Y LOS RELLENOS, ADEMAS TUS GRAFICOS SON MUY ENTENDIBLES Y SON DIGNOS DE IMPRIMIR EN TAMAÑO CARTA PARA REFERENCIAS POSTERIORES YA QUE CUANDO SE ESTA APRENDIENDO ESTO DEL MARGEN Y EL PADDGING AL PRINCIPIO SIEMPRE CAUSA MUCHA CONFUSION.
NOTA: TU BLOG ES DE LOS MEJORES TANTO POR EL CONTENIDO COMO POR EL DISEÑO. EN ESTOS MOMENTOS LOS GUARDARE EN MI DE. LI. CI. US
Gracias por lo elogios. Padding y Margin son confusos al principio pero después también, sobre todo porque los navegadores hacen siempre lo que se les da la gana :D
Hola Jmiur, te hago la siguiente consulta, tengo el encabezado o titula de mi blog y me gustaría poder establecer un espacio entre este y con el bloque de adsense que quiero poner, dado que al hacerlo se pegen entre sí. ¿Cómo tendría que hacer para hacer esto o bien con otros bloques? y también la pregunta está en como hacer para poderlo poner por arriba del titular, ya que no tengo mediante Blogger la opción de hacer esto. Desde ya muchas gracias y espero tu respuesta.
Lo más probable es que puedas manejar los márgenes con el CSS:
#header-wrapper {
border:1px solid #CCCCCC;
margin:0pt auto 10px;
width:660px;
}
margin:0pt auto 10px;
significa 0 margen hacia arriba, auto (centrado izquierda y derecha) y 10 pixeles de margen hacia abajo
Si el otro elemento está abajo, podrías aumentar el valor 10.
Pero, lo razonable sería primero poner el elemento nuevo y luego ponerle a este nuevo elemento los márgenes. La lógica entonces es agregarlo y luego vemos como manipularlo.
Sobre por qué no podés moverlo arriba. Lo más probable es que tu plantilla diga esto:
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
Bastaría eliminar eso en negrita para que pudieras agregar cualquier elemento en el header.
Muchas gracias jmiur y disculpá la demora de mi respuesta, estuve sin sistema desde hace un día y recié ahora puedo conectarme. Te cuento que el dato que me pasaste es sumamente útil. Desde ya muchas gracias por tu atención
No hay problema, a todos nos pasa :(
Me alegro que sirviera :)
Gracias por la info, me ha sido muy util para mi blog.
gracias !!!
Según lo que veo el Margin y el Padding es lo "mismo". Ese ejemplo que das prodria verse bien si en el casillero de padding se pone 2 y en el de marguin 2y se usa firefox pero no en otros exploradores que no he porbado
No, de ninguna manera son lo mismo. Es fácil de probar:
<img style="display:block;background-color:red;border:2px solid blue;" src="IMAGEN"/>
Una imagen con borde y fondo. El fondo rojo, no se ve.
<img style="display:block;background-color:red;border:2px solid blue;margin:50px;" src="IMAGEN"/>
Ahhh, pongo margin, entonces pero ... tampoco se ve, sólo se separa de los otros elementos.
<img style="display:block;background-color:red;border:2px solid blue;padding:10px;" src="IMAGEN"/>
Intentamos entonces con padding y si, aquí si se ve el fondo rojo.
El padding se utiliza para separar el contenido de un elemento de los bordes del elemento que lo contiene (sea este visible o no).
El margin se utiliza para separar un elemento de otro elemento.
No, de ninguna manera son lo mismo :D
Buenísimo no terminaba de entenderlo hasta ahora. Muchas gracias che =)
Hola! lo que más me cuesta son manejar los términos; he puesto recientemente en mi blog, un menú con submenús y tengo el siguiente problema, si la distancia entre el menu y las entradas, no es mucha, no se pueden desplegar los submenus, pero si pongo algun gadget debajo del menu, si. Ahora jugando con el padding y el margin, he hecho el espacio suficiente para que pueda desplegarse el submenu, pero queda antiestético.
Espero puedas ayudarme, y que me haya explicado bien. Gracias de antemano.
Te dejo el link de mi blog para que lo veas www.elitevoley.com
Fabiana:
El problema en el menú de tu página no está en los márgenes o paddings así que podrías eliminar ese margen de 150 que has agregado en #subnavbar { .... }
El problema es otra propiedad llamada overflow que hace que, pese a que el menu tiene propeidades correctas, no se despliegue. Una está acá:
.tabs-outer {
...............
overflow:hidden;
}
y la otra acá:
.tabs .widget ul, .tabs .widget ul {
..............
overflow:hidden;
}
Creo que la que molesta es la primera y si no veo mal, esa está en la plantilla, bastaría que cambiaras overflow:hidden; por overflow:visible; o bien por overflow:visible !important;
.tabs-outer {
...............
overflow:visible !important;
}
la otra, la coloca Blogger de manera automática y si es necesario sobrescribirla, simplemente la agregas así:
.tabs .widget ul, .tabs .widget ul { overflow:visible !important; }
Si haces ese cambio, podrás verificar si funciona usando Vista Previa.
¡Hola de nuevo!
Solucionado, muchísimas gracias! era un problema que me traía de cabeza desde hace unos días.
¿Sabes porque cuando abro el blog con IE y despliego el menu, como que se superpone a lo que esté debajo, en este caso, el adsense?
Por lo que veo, eso no ocurre con IE8, allí se ve correctamente. Debe estar pasando con IE7 o si IE está en modo compatibilidad. Hasta ahora, no se me ocurre que cosa puede hacerse para evitarlo.
¿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 ...