Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje23-06-2011, 02:34 (UTC)    
Título del mensaje: Tutorial : Diferenciar Margins , Paddings , Borders

Hola aqui denuevo gracias a estos 10 dias de estudio acerca de codigos CSS Y HTML les presento algo que uds dudan al poner en las propiedades ...

BORDER
PADDING
MARGIN

BORDER

Si en una capa solo definimos su contenido en Html esta solo mostrará eso, el contenido, ya sea una imagen, un párrafo o lo que sea. Pues bien, la propiedad border dibuja un borde alrededor justo de ese contenido. El borde estará pegadito pegadito al contenido, como en este caso de la derecha. El borde por defecto, si no se indica otra cosa, es una línea continua de 1 pixel de grosor y de color negro.

CONCLUSION: BORDER = BORDE DE IMAGEN SIN QUITARLE NINGUN PIXEL DE TAMAÑO NI AGRANDARLE NINGUN PIXEL.

¿ COMO SE ESCRIBE EL BORDE EN CODIGO ?

border 3px 3px 3px 5px

3px = MARGEN DE ARRIBA
5px = MARGEN DE LA DERECHA
3px = MARGEN DE ABAJO
5px = MARGEN DE LA IZQUIERDA

PD: Los codigos van en sentido del reloj osea el primero es arriba - derecha - abajo - izquierda

PADDING

el padding lo usaremos para definir la distancia de la separacion entre el borde y el contenido dejando el espacio hecho sin acceso a poner nada en el

Conclusion : Por ejemplo le pongo 20 de padding a una imagen .... esos 20px son el espacio del contenido (TEXTO,IMAGEN .etc) y el borde

¿ COMO SE ESCRIBE EL PADDING EN CODIGO ?

padding: 10px 15px 10px 15px


10px = MARGEN DE ARRIBA
15px = MARGEN DE LA DERECHA
10px = MARGEN DE ABAJO
15px = MARGEN DE LA IZQUIERDA

MARGIN

Ahora tenemos otra distancia más. El margin es la distancia de separación que se va a dejar entre el borde y la parte exterior del elemento de la capa. En este caso no se ve, pues es una zona exterior al dibujo en la que no se permite que aparezca nada. Por eso se usa para separar unos párrafos de otros, como vimos en las lecciones primeras. En este caso solo hay definido el margin en el ejemplo de la derecha.

¿ COMO SE ESCRIBE EL MARGIN EN CODIGO ?

margin: 6px 8px 6px 8px

6px = MARGEN DE ARRIBA
8px = MARGEN DE LA DERECHA
6px = MARGEN DE ABAJO
8px = MARGEN DE LA IZQUIERDA

IMAGEN TEORICA DEL TEMA :

Gracias esto fue todo por este tema seguramente sacare otros

PD GENERAL: LOS PX EN COLORES ES PARA LA EXPLICACION ¡¡NO SE PONEN EN COLOR EN EL EDITOR EN EL FAMOSO NOTE-PAD O EN LA WEB YA ECHO!!


Ultima edición por diversionenvos el Jue Jun 23, 2011 9:28 pm; editado 5 veces
Mensaje23-06-2011, 03:06 (UTC)    
Título del mensaje:

Recuerde que esta semana estaremos tratando la categoría "Problemas Generales".

+Info: http://www.paginawebgratis.es/forum/viewtopic.php?t=63648

Saludes,
Team-Soporte.

Movido a petición del autor.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina


Ultima edición por team-soporte el Jue Jun 23, 2011 9:10 pm; editado 1 vez
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group