Tutorial HTML CSS
Tutorial HTML y CSS
1. Tutorial : Diferenciar Margins , Paddings , Borders.
BORDER
Si en una capa solo definimos su contenido en html esta únicamente mostrará eso. Pues bien, la propiedad border dibuja un borde-límite alrededor de ese contenido. El borde estará situado en el contorno. Por defecto, si no se indica otra cosa, es una línea continua de 1 pixel de grosor y de color negro.
Border = Borde de la imagen sin quitarle ningún pixel de tamaño ni agrandarle.
¿Cómo se escribe el borde en código?
border: 3px 3px 3px 5px;
3px = Margen de Arriba
3px = Margen de la Derecha
3px = Margen de Abajo
5px = Margen de la Izquierda
PD: Los códigos van en sentido del reloj siendo el primero: arriba - derecha - abajo - izquierda
PADDING
El padding lo usaremos para definir la distancia de la separación entre el borde y el contenido dejando el espacio hecho sin acceso a poner nada en él.
Por ejemplo, 20px de padding a una imagen .... son el espacio del contenido y el borde.
¿Cómo se escribe el padding en código?
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.
¿Cómo se escribe el margin en código?
margin: 6px 8px 6px 8px;
6px = Margen de Arriba
8px = Margen de la Derecha
6px = Margen de Abajo
8px = Margen de la Izquierda
Como dato complementario, la implementación de los código como puedes ver están resumidos, de esta forma hace más rápida la interpretación del mismo en los navegadores. Además, puedes trabajar en porcentaje las distancias.
¿Deseas más tutoriales?
Visita la sección de Recursos en el menú
Visita la sección de Recursos en el menú
Noticia destacada /
Página Actual Site
