Foros del Web » Creando para Internet » CSS »

Uso correcto del Padding

Estas en el tema de Uso correcto del Padding en el foro de CSS en Foros del Web. Buenas, llevo un tiempo diseñando mis webs con divs en lugar de con tablas (tiempo...ya un par de años xD) pero siempre tengo el mismo ...
  #1 (permalink)  
Antiguo 18/09/2011, 18:49
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 16 años, 9 meses
Puntos: 5
Uso correcto del Padding

Buenas,

llevo un tiempo diseñando mis webs con divs en lugar de con tablas (tiempo...ya un par de años xD) pero siempre tengo el mismo problema.

Si yo hago un div con texto dentro, pondré padding para marcar unos margenes de distancia entre los limites del div y el propio texto...pero al usar el padding, el div se hace mas amplio, lo que estropea completamente mi diseño cada vez que pongo padding a algun elemento y tengo que estar cambiando cosas constantemente.

Supongo que esto no debería pasar y que si pasa, es porque no lo uso correctamente o hay alguna forma de que la caja no se haga más grande porque es un problema.

He intentado poniendo un div dentro del otro y que el interior sea el portador del padding pero sucede exactamente lo mismo. Ya no se que más hacer porque es una molestia estar diseñando de esta forma, teniendo cada dos por tres un div que se sale del div central por culpa del padding.

Quería saber si el padding debe ir acompañado de alguna otra cosa o se debe usar de alguna forma en especifico para que esto no suceda o si por el contrario, no debería utilizar el padding, si no otro elemento.

Gracias.
  #2 (permalink)  
Antiguo 18/09/2011, 19:18
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 15 años, 4 meses
Puntos: 137
Respuesta: Uso correcto del Padding

claro que con margin+border+padding todo esto se suma al width... del elemento...
necesitas entender un poco mas acerca del "modelo de cajas"
http://www.librosweb.es/css/capitulo4.html
y sobre margin y padding
http://www.librosweb.es/css/capitulo...y_relleno.html
y para mas informacion aun puedes usar el buscador del foro... y si no consigues solucionar tu problema... pon todo el codigo implicado html/css para poder ayudarte
__________________
Toroflix - movies.
  #3 (permalink)  
Antiguo 19/09/2011, 05:22
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 16 años, 9 meses
Puntos: 5
Respuesta: Uso correcto del Padding

No hay nada entonces para poner que, por ejemplo, el tamaño de un div sean 500px FIJOS y que al poner padding en el div interno, sea éste el que reduzca su tamaño en lugar de ampliar el div externo.

Lo mejor seria entonces, poner el padding/margin y una vez puesto esos valores, decidir el ancho o alto del div? Así al poner el ancho/alto tendría en cuenta ya lo que suma el padding.

¡Ah! Con lo facil que era poner un par de td y tr...

Gracias por responder, echare un ojo a esos links esta noche que ahora me tengo que ir a clases.
  #4 (permalink)  
Antiguo 19/09/2011, 11:50
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 8 meses
Puntos: 142
Respuesta: Uso correcto del Padding

Es en verdad una ecuación matemática muuuuy sencilla

Si quieres una caja de 500px:

padding:10px;width:480px; [ (10x2)+480 = 500 ]
padding:20px;width:460px; [ (20x2)+460 = 500 ]

Como verás, no tiene gran ciencia en verdad, y te ayuda a preservar el tamaño del contenido, independiente del padding; ¡Algo muy importante cuando manejas imágenes!

Claro, que si quieres que un contenido siempre tenga cierto ancho, y agregar el padding (Muy útil para contenidos dinámicos y aplicaciones web), puedes usar un doble divisor, aunque no lo recomiendo mucho para contenido estático, ya que es crear más divisores sin necesidad...

<div class="contenedor"><div class="contenido">Lorem Ipsum...</div></div>
.contenedor{width:500px}
.contenido{padding:10px}

El contenedor será siempre 500px. Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 19/09/2011, 12:11
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 5 meses
Puntos: 310
Respuesta: Uso correcto del Padding

Cita:
Iniciado por alexk
claro que con margin+border+padding todo esto se suma al width... del elemento...
Hasta donde yo sé, el margin no se suma al width, aunque sí lo hacen el border y el padding.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #6 (permalink)  
Antiguo 19/09/2011, 12:12
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 8 meses
Puntos: 142
Respuesta: Uso correcto del Padding

Cita:
Iniciado por _cronos2 Ver Mensaje
Hasta donde yo sé, el margin no se suma al width, aunque sí lo hacen el border y el padding.
Saludos (:
Yo se que si lo hace, lo he comprobado =P
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #7 (permalink)  
Antiguo 19/09/2011, 13:48
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 16 años, 9 meses
Puntos: 5
Respuesta: Uso correcto del Padding

¡daPhyre! Se cual es el calculo a hacer XD lo que queria saber es si es así como se maqueta, es decir, si hay que diseñar en base a los paddings que vas a querer porque en ese caso, vale más la pena pensar primero donde quieres los paddings para saber despues que ancho vas a ponerles...o si realmente hay una forma más clara de utilizar esto, algun método para no deformar por accidente el diseño.

Vuestras respuestas me dejan claro que es así. ¡Lo único que debo hacer ahora es pensar primero en el padding y luego en el width en lugar de lo contrario!

Etiquetas: correcto, padding
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:46.