CSS - intermediate - Lección nº 5
Distancias y bordes simples
¿De qué trata esta lección?
En esta lección aprendemos a agregar bordes a textos e imágenes. Usaremos solo la propiedad de borde (border) para crear bordes. Experimentaremos agregando distancia entre contenido y borde.
Nuevas propiedades CSS en esta lección:
margin – esta propiedad se utiliza para agregar una distancia entre un contenido y los contenidos que lo rodean. Podemos distanciar imágenes o textos desde el margen del navegador o entre sí. Si agregamos solo un valor, se aplicará a los cuatro lados del contenido. Podemos aplicarlos por separado usando: margin-top, margin-right, margin-bottom, margin-left (margen superior, margen derecho, margen inferior, margen izquierdo).
padding – con esta propiedad podemos agregar distancia entre un contenido y su borde. El relleno se aplica a los cuatro lados, pero hay otras propiedades para establecer la distancia por separado para todos los lados: padding-top, padding-right, padding-bottom, padding-left.
border – esta propiedad agregada a una etiqueta HTML da como resultado la creación de un borde alrededor del contenido. Con esta propiedad podemos añadir a la vez el estilo, grosor y color del borde al mismo tiempo (shorthand), o, también es posible establecerlos de forma independiente.
Ejemplo:
En el ejemplo anterior, aplicamos una línea continua de color azul de 5 píxeles de grosor a los párrafos utilizando la propiedad de orden.
El título y los márgenes de los navegadores están a una distancia de 20 píxeles del borde. Usamos la propiedad margin para conseguirlo.
El borde y el texto de los párrafos están a una distancia de 10 píxeles, las configuraciones se agregan mediante la propiedad padding (relleno).
Guía:
- Con 2 valores: padding: top&bottom left&right; (ej:: padding: 20px 40px;)
- Con 3 valores: padding: top left&right bottom; (ej: padding: 20px 40px 30px;)
En esta lección aprendemos a agregar bordes a textos e imágenes. Usaremos solo la propiedad de borde (border) para crear bordes. Experimentaremos agregando distancia entre contenido y borde.
Nuevas propiedades CSS en esta lección:
margin – esta propiedad se utiliza para agregar una distancia entre un contenido y los contenidos que lo rodean. Podemos distanciar imágenes o textos desde el margen del navegador o entre sí. Si agregamos solo un valor, se aplicará a los cuatro lados del contenido. Podemos aplicarlos por separado usando: margin-top, margin-right, margin-bottom, margin-left (margen superior, margen derecho, margen inferior, margen izquierdo).
padding – con esta propiedad podemos agregar distancia entre un contenido y su borde. El relleno se aplica a los cuatro lados, pero hay otras propiedades para establecer la distancia por separado para todos los lados: padding-top, padding-right, padding-bottom, padding-left.
border – esta propiedad agregada a una etiqueta HTML da como resultado la creación de un borde alrededor del contenido. Con esta propiedad podemos añadir a la vez el estilo, grosor y color del borde al mismo tiempo (shorthand), o, también es posible establecerlos de forma independiente.
Ejemplo:
En el ejemplo anterior, aplicamos una línea continua de color azul de 5 píxeles de grosor a los párrafos utilizando la propiedad de orden.
El título y los márgenes de los navegadores están a una distancia de 20 píxeles del borde. Usamos la propiedad margin para conseguirlo.
El borde y el texto de los párrafos están a una distancia de 10 píxeles, las configuraciones se agregan mediante la propiedad padding (relleno).
Guía:
- Es obligatorio especificar el tipo de borde en la versión abreviada (solid, dotted, dashed), de lo contrario no aparecerá el borde, pero se puede omitir el tamaño y / o el color y el borde aún se mostrará.
- Las propiedades padding y margin se pueden configurar utilizando otras medidas, no solo píxeles: podemos probar porcentajes, centímetros, puntos.
- Tanto las propiedades padding como margin se pueden establecer de 3 formas abreviadas, afectando los siguientes lados:
- Con 2 valores: padding: top&bottom left&right; (ej:: padding: 20px 40px;)
- Con 3 valores: padding: top left&right bottom; (ej: padding: 20px 40px 30px;)
Ejercicios
1. Agrega un nombre de clase a la imagen en el archivo aspects.html y aplícalo al estilo en styles.css con un borde sólido de 2 píxeles con un color a tu elección. El color del borde debe cambiar cuando movemos el cursor sobre él.
Ver el resultado
2. Aplica a todos los párrafos un borde izquierdo de 1px, con un color a tu elección. Agrega una distancia de 20px a la izquierda entre el borde y el texto y 10px entre el margen de los navegadores y el borde.
Ver el resultado
3. Agrega los siguientes ajustes a la imagen en la página index.html: la imagen y el título deben estar a una distancia de medio centímetro a la izquierda del margen del navegador, el título debe estar a 0.25 centímetros de la imagen.
Ver el resultado
Cuestionario
1. ¿Qué significa para la imagen, si agregamos la siguiente configuración?
margin: 0px 10px;
margin: 0px 10px;
2. ¿Qué formato de CSS es incorrecto?
3. ¿Cuál de las siguientes descripciones no produce un borde visible?
4. Si aplicamos la configuración de abajo a una imagen, ¿a qué distancia se encuentra de los demás contenidos?
padding: 10px;
margin: 5px;
border: 2px solid;
Información suplementaria
Puedes leer más sobre el tema de la lección y hacer ejercicios visitando los siguientes enlaces:
https://www.w3schools.com/css/css_boxmodel.asp,
https://www.w3schools.com/css/css_margin.asp,
https://www.w3schools.com/css/css_padding.asp,
https://www.w3schools.com/css/css_border.asp.
https://www.w3schools.com/css/css_boxmodel.asp,
https://www.w3schools.com/css/css_margin.asp,
https://www.w3schools.com/css/css_padding.asp,
https://www.w3schools.com/css/css_border.asp.
