Con frecuencia nos confundimos con las propiedades margin y padding y es que suenan parecido pero tienen distinta función.
Con margin establecemos la distancia entre los lados de un elemento, es el espacio que está fuera del borde.
Cuando hablamos de padding lo que establecemos es la distancia que está entre el contenido y el borde o por diferenciarlo mejor es lo que llamaríamos el relleno.
Los valores pueden ser auto, cm, mm, in,pt, pc, px, em, ex.

- em (ems, la altura de la fuente de los elementos0
- ex (x-height, altura de la letra "x")
- px (pixels, relativa a la resolución del lienzo)
- in (pulgadas; 1 pulgada=2.54 cm)
- cm (centímetros; 1 cm = 10 mm)
- mm (milímetros)
- pt (puntos; 1pt = 1/72 pulgada)
- pc (picas; 1 pc = 12 pt)

Para añadir distancia en la parte superior de un elemento lo establecemos con margin-top, si la distancia es en la parte inferior lo haremos con margin-bottom. Cuando deseamos dejar más espacio a la izquierda margin-left y si es a la derecha con margin-right.


CONTINUAR

Eulalia

joer! tenemos telepatia. Hace un par de dias expliqué lo del padding en el manual.
Besitos.

Responder
Gem@

:: jajajaja voy a verlo Eulalia, así te copio algo descaradamente :)

Responder
Gem@

:: Eulalia ¿en Tuneando el blog?
(Con Firefox el bloque derecho del footer queda desplazado te lo digo por si no te diste cuenta)

Responder
Jose

No sabes cuánto me va a servir este sencillo esquema de los margin y padding, porque la verdad, soy un poco negado en este sentido. Está claro que habrá que practicar.:)
Besos.

Responder
Gem@

:: Claro que si Jose es cuestión de probar.
Juega con margin y verás que mueves el bloque de contenido lo llevas donde quieras y con padding moverás el contenido pero nunca saldrá del bloque :)

Responder
Gildo Kaldorana

Si señora, bien explicado, claro y conciso (además se entiende y todo).
Un saludo

Responder
Gem@

:: Gracias por comentar Gildo Kaldorana :D
Es una suerte que alguien me entienda porque a veces ni me entiendo yo :S

Responder
Eulalia

Hola Gem@: Ya se lo del footer, pero no logro que suba, tendré que revisar los margin y los padding de esos bloques, jeje. Gracias.

Responder
Eulalia

Y por cierto, no está en Tuneando, está en el Manual.

Responder
Dña. Urraca

Esto lo estaba esperando y buscando yo, que me costaba entenderlo.

Responder
Joaneta

Hola Gem@:
Como se hace para que salgan los comentarios en la parte derecha del Blog?:D

Responder
Felix Casanova Briceño

Hola Gemma¡¡

Gracias por está explicación tan sencilla. Así da gusto aprender contigo. Por fin lo tengo claro¡¡

Un beso.

Responder
Graciela

Piedra Preciosa, cuando consiga organizar mis neuronas te leo y si me olvido, seguro te pregunto dentro de un año o meses :D

Responder
Gem@

:: Eulalia estuve mirando tu footer hay una alguna posible solución %% aquí
Es posible que con padding:9px 10px 0 0 en el footer-columna-contenedor y en footer4 disminuyendo el ancho a width: 29% se centren los tres bloques, también sería bueno darle a footer-wrapper la misma anchura que outer-wrapper.

:: Me alegra lo entiendas Dña. Urraca porque nos saca de más de un problema diferenciar margin de padding :)

:: Añadiendo un script Joaneta, puedes verlo %% aquí ;)

:: Me alegra mucho Felix Casanova Briceño, gracias por comentar :)

:: Cuando te venga bien Graciela :)

Responder
Eulalia

Gem@, gracias por el intento, pero no funciona.
Si le pongo al footer-wrapper el ancho de outer-wrapper, que es el 100%, ya que es una harbor, la tercera columna se va del blog por la derecha. Con los padding que me indicas también se desmadra todo.
Al final le he quitado un 1% a la columna central y parece que ahora se ve bien. Lo que me extraña es que hasta hace poco se veia bien con firefox y, de repente, decidió irse de paseo sin que le hubiera cambiado nada.
Un abrazo.

Responder
Gem@

:: Me alegra lo resolvieras Eulalia lo importante es encontrar una solución, en estas cosas ya sabes lO que ocurre que cambias una cosa se descoloca otra :S

Responder
Amiitha

Hola Gema! quería preguntar... ¿Es con estas propiedades que se separan las entradas y gadgets? verás, estoy modificando mi plantilla -utilizo la Awesome que proporciona Blogger- y quiero que las entradas me queden en una fila contínua, que no se separen por fechas... me expliqué bien? :$ lo quiero hacer es quitar la distancia entre las entradas, osea algo así como pegarlas...

Intenté con los gadgets y me salió pero no encuentro la forma para quitar ese espacio en las entradas :(

Responder
Gem@

:: Amiitha estas propiedades son para cualquier parte del blog, sólo hay que saber el lugar donde aplicarlas ¿de qué blog estamos hablando?

Responder
Amiitha

Esta es la dire de mi blog de pruebas:
http://my-pervert-mind-de-prueba.blogspot.com/

gracias por responder ;)

Responder
Novena Deportes

Como colorear los bordes... algo así como en www.temucoalbiverde.net este es mi blog www.canaltvsur.com, necesito que los borde queden en blanco, agradecería tu ayuda Gema...

Responder
Gem@

:: Amiitha prueba a quitar la fecha de ahí de la siguiente forma, en plantilla de diseño/entradas del blog/editar y no marques la casilla primera de fecha y si la de hora.
Luego en configuración/formato busca Formato de hora y escoge en lugar de la hora la fecha.
De esa forma la fecha la tendrás en el pos-footer y ese espacio que separa las entradas desaparecerá.
Si aún queda espacio busca el siguiente código:

.post-outer {
padding-bottom: 0px;
}

.post-outer, .inline-ad {
border-top: 1px solid #222222;
margin: 0 -15px;
padding: 0 15px;
}

tendrás distintos valores pero yo los puse a cero.
Con eso quedarán más pegados.

:: Novena Deportes si te refieres al borde que rodea el blog puedes añadirlo en:

#content-wrapper {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #239600;
}

incluyendo la línea en negrita :)

Responder
Amiitha

Hola Gema :) de nuevo gracias por su respuesta, solo me temo que no era eso a lo que me refería... lo que quiero hacer es quitar el espacio que hay entre entrada y entradas, aquí dejo una imagen a ver si se entiende mejor:

http://4.bp.blogspot.com/-NKsG2sIg_F8/TeD31VTQDsI/AAAAAAAABQ4/X0zr6VPib2k/s1600/blog.png

lo que inteo hacer es que las entradas queden juntas, apenas separadas por un biselado -como por ejemplo en este blog: http://bishies-bishies.blogspot.com/

por eso preguntaba si las entradas se separaban con un padding y si es así como puedo quitarselo, no se mucho sobre esto por eso ando perdida :( perdón por molestar tanto :$

Responder
Gem@

:: Puedes probar igual lo que te dije omitiendo el cambiar de sitio la fecha :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:) :'( :( :P :D :$ ;) :-I :X :O |O :S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top