Foros del Web » Creando para Internet » CSS »

Duda muy simple

Estas en el tema de Duda muy simple en el foro de CSS en Foros del Web. Hola compañeros y amigos del FORO, antes que nada les quiero agradecer a todos los que me contestan con la mejor onda TODAS mis preguntas ...
  #1 (permalink)  
Antiguo 17/10/2011, 17:02
 
Fecha de Ingreso: julio-2011
Mensajes: 15
Antigüedad: 11 años
Puntos: 0
Exclamación Duda muy simple

Hola compañeros y amigos del FORO, antes que nada les quiero agradecer a todos los que me contestan con la mejor onda TODAS mis preguntas sean medias bobas o no (para mi jaja) ...

Hoy vengo con una consulta de lo más bobo...

He leido por todos lados la diferencia entre padding y margin y demás pero se ve que no lo he entendido.

Yo tengo un div que le puse una align center y un padding top del 50% y no se ve en el centro de la pantalla si no que mucho más abajo porque puede ser ?

Otra cosa que creo que viene con lo mismo, como hacen Uds para que un diseño se acople a cualquier resolución ? y que no suceda (como me pasa a mi que al cambiar la dimension de la pantalla se va todo al diablo ... )
  #2 (permalink)  
Antiguo 17/10/2011, 17:39
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 11 años, 10 meses
Puntos: 63
Respuesta: Duda muy simple

Pues haber, el padding es el espacio que creas entre el contenido y su contenedor, osea si creas un div de 300px, dentro le das un texto y le das un padding de 50%... esto lo que hará será crear un espacio del 50% del alto y del acho de contenedor.
Cuando defines padding: 50% estas dando valores al top, al left, al bottom y al right para que todas estas posiciones tengan el padding a 50%. Si quieres algo más exacto podrias hacer padding: 3px 0px 3px 0; donde el primer 3px seria el espacio entre el texto y la zona de superior del contenedor, donde el primer 0 seria el espacio entre el texto y la zona izquierda del contenedor, donde el segundo 3px seria el espacio entre el texto y la zona inferior del contenedor y por ultimo donde el segundo 0 seria el espacio entre el texto y la zona derecha del contenedor.

El margin es la distancia entre un elemento u otro o para que lo entiendas mejor la distancia entre dos o mas contenedores... osea si creas dos div y a uno le das un margin de 3px, ese dis estara separádo del otro div unos 3px ya sea a la derecha, arriba, izquierda o debajo dependiendo de como lo definas.
El margin se define igual que el padding. Puedes poner directamente margin: 3px y todas las posiciones del contenedor tendran un margen de 3px; y si pones margin: 3px 0 3px 0 definiras las distancias del top, left, botton, y right.
Ves que no le doy px al 0 pero esto es debido a que 0 es un valor que no necesariamente necesita tipo de medida, por mas que le pongas px, pt o % siempre será 0.

En cuanto a lo de las resoluciones muchas veces son fallos a la hora de medir los valores o para que entiendas, las distancias que das a paddings y margins, ya que si por ejemplo creas un div con 300px y a su contenido le das 25px; y este padding no puede coger ese tamaño de padding hace que se agrande tu contenedor con la finalidad de adaptarse a tu contenido con padding, lo mismo pasaria con el margin.

Espero haberme explicado en este gran tocho de párrafo que te acabo de soltar xD. Pero asi aprendi yo... a largas charlas y largas practicas.
Saludos
  #3 (permalink)  
Antiguo 18/10/2011, 14:56
 
Fecha de Ingreso: julio-2011
Mensajes: 15
Antigüedad: 11 años
Puntos: 0
Respuesta: Duda muy simple

Cita:
Iniciado por Batan Ver Mensaje
Pues haber, el padding es el espacio que creas entre el contenido y su contenedor, osea si creas un div de 300px, dentro le das un texto y le das un padding de 50%... esto lo que hará será crear un espacio del 50% del alto y del acho de contenedor.
Cuando defines padding: 50% estas dando valores al top, al left, al bottom y al right para que todas estas posiciones tengan el padding a 50%. Si quieres algo más exacto podrias hacer padding: 3px 0px 3px 0; donde el primer 3px seria el espacio entre el texto y la zona de superior del contenedor, donde el primer 0 seria el espacio entre el texto y la zona izquierda del contenedor, donde el segundo 3px seria el espacio entre el texto y la zona inferior del contenedor y por ultimo donde el segundo 0 seria el espacio entre el texto y la zona derecha del contenedor.

El margin es la distancia entre un elemento u otro o para que lo entiendas mejor la distancia entre dos o mas contenedores... osea si creas dos div y a uno le das un margin de 3px, ese dis estara separádo del otro div unos 3px ya sea a la derecha, arriba, izquierda o debajo dependiendo de como lo definas.
El margin se define igual que el padding. Puedes poner directamente margin: 3px y todas las posiciones del contenedor tendran un margen de 3px; y si pones margin: 3px 0 3px 0 definiras las distancias del top, left, botton, y right.
Ves que no le doy px al 0 pero esto es debido a que 0 es un valor que no necesariamente necesita tipo de medida, por mas que le pongas px, pt o % siempre será 0.

En cuanto a lo de las resoluciones muchas veces son fallos a la hora de medir los valores o para que entiendas, las distancias que das a paddings y margins, ya que si por ejemplo creas un div con 300px y a su contenido le das 25px; y este padding no puede coger ese tamaño de padding hace que se agrande tu contenedor con la finalidad de adaptarse a tu contenido con padding, lo mismo pasaria con el margin.

Espero haberme explicado en este gran tocho de párrafo que te acabo de soltar xD. Pero asi aprendi yo... a largas charlas y largas practicas.
Saludos
MUCHAS GRACIAS !! Voy a implementar todos esos conocimientos
  #4 (permalink)  
Antiguo 18/10/2011, 15:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 2 meses
Puntos: 539
Respuesta: Duda muy simple

Posíblemente le interese lo que dicen exactamente las especificaciones oficiales respecto del modelo de caja.

Etiquetas: diferencia, margin, paddin
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 08:24.