Duda muy simple

[guidodipaolo]

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 ... )

[Batan]

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

[guidodipaolo]

Iniciado por Batan

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

[kseso?]

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