Foros del Web » Creando para Internet » CSS »

Problema con capas y dimensiones - padding y margin

Estas en el tema de Problema con capas y dimensiones - padding y margin en el foro de CSS en Foros del Web. Hola, tengo el siguiente problema: En una maquetación de 3 columnas, tengo una capa contenedora y dentro una capa a la derecha, una central y ...
  #1 (permalink)  
Antiguo 04/04/2010, 17:07
 
Fecha de Ingreso: agosto-2007
Mensajes: 21
Antigüedad: 10 años, 4 meses
Puntos: 0
Problema con capas y dimensiones - padding y margin

Hola, tengo el siguiente problema:

En una maquetación de 3 columnas, tengo una capa contenedora y dentro una capa a la derecha, una central y otra a la izquierda.

Supongamos que la capa contenedora tenga de ancho 600px
Dentro de ella, la capa derecha 100, la izquierda 100 y la central, obviamente 400px.

Así todo encaja perfectamente, pero si a la capa central le pongo un padding: 5px; la capa derecha se me coloca debajo de todo.

Si el padding es interior (se realiza dentro de la capa), porque se descoloca todo?

Supongo que será algo de lo mas sencillo, pero no soy capaz de averiguar qué ocurre.

Gracias.
  #2 (permalink)  
Antiguo 04/04/2010, 18:28
 
Fecha de Ingreso: octubre-2009
Mensajes: 39
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Problema con capas y dimensiones - padding y margin

El padding es el espacio existente entre el contenido y el borde, se supone que no todo deberia pasar asi, prueba cambiando la posicion de las capas es decir absolute.
  #3 (permalink)  
Antiguo 05/04/2010, 06:41
 
Fecha de Ingreso: agosto-2007
Mensajes: 21
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Problema con capas y dimensiones - padding y margin

Si a las capas les pongo position : absolute; entonces si que se me desmonta todo...
  #4 (permalink)  
Antiguo 05/04/2010, 07:20
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Problema con capas y dimensiones - padding y margin

Cita:
Iniciado por phisc Ver Mensaje
Si el padding es interior (se realiza dentro de la capa), porque se descoloca todo?
La anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus propiedades width y height. El margen, el relleno y los bordes establecidos a un elemento determinan la anchura y altura final del elemento.

Mira este código
Código CSS:
Ver original
  1. div {
  2.   width: 300px;
  3.   padding-left:  50px;
  4.   padding-right: 50px;
  5.   margin-left:   30px;
  6.   margin-right:  30px;
  7.   border: 10px solid black;
  8. }

La anchura total con la que se muestra el elemento no son los 300 píxel indicados en la propiedad width, sino que se tienen en cuenta todos sus márgenes, rellenos y bordes: 30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 píxel

Asi que si pones un padding de 5px se lo tendrás que restara al width.

Extraido de Librosweb.es

Cita:
Iniciado por metal_boy Ver Mensaje
El padding es el espacio existente entre el contenido y el borde, se supone que no todo debería pasar así, prueba cambiando la posición de las capas es decir absolute.
Cuidado con la información que damos sin contrastar, a veces liamos mas que ayudamos. La posición absolute en el estándar de CSS, se explica como que la caja sale por completo del flujo normal del documento. De hecho, las cajas posicionadas de forma absoluta parece que están en un nivel diferente al resto de elementos de la página. Por ese motivo, al poner absolute se descoloca.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #5 (permalink)  
Antiguo 05/04/2010, 14:34
 
Fecha de Ingreso: agosto-2007
Mensajes: 21
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Problema con capas y dimensiones - padding y margin

Vale ahora entiendo. Yo pensaba que sólo margin y border ampliaban el tamaño de la capa, puesto que iban "fuera" de ella, y pensé que el padding, al realizarse "dentro" no sumaba.

Muchas gracias por la aclaración, Impostor! Gracias metal_boy.

Etiquetas: capas, dimensiones, margin, 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 06:16.