En este artículo, veremos cómo eliminar el espacio generado debajo de la imagen, mientras implementamos la propiedad de borde CSS. En general, hemos visto que cuando aplicamos la propiedad de borde en la imagen, también se genera un espacio en blanco adicional alrededor de la imagen o debajo de la imagen. Por ejemplo, al usar la etiqueta <div> , cuando colocamos una imagen dentro de ella, obtenemos un espacio en blanco adicional (casi 2 px) entre el borde inferior de div y la imagen dentro de él.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta>
<title>White space under the Image</title>
<style>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220111163542/gfg.png"
alt="GFG_img">
</div>
</body>
</html>
Producción:
El pequeño espacio entre el extremo inferior de la imagen y el borde verde inferior del div.
La razón detrás de esto se debe al comportamiento predeterminado del navegador, no es un error o cualquier tipo de error técnico en el navegador. El hecho principal es que la etiqueta <img> se representa como un elemento en línea . Entonces, una imagen se trata como un alfabeto y se asentará en una línea de base como a, b, s, A, etc.
En la imagen de arriba, podemos ver alfabetos como g e y , tienen descendientes, es decir, una parte de esos alfabetos se encuentra debajo de la línea de base. Dado que la etiqueta <img> se trata como un elemento de bloque en línea. Cuando colocamos una imagen dentro de una etiqueta <div>, cubre el área hasta la línea de base, y el área de abajo no se usa y se ve como un espacio en blanco. Este es el comportamiento predeterminado que crea el espacio en la parte inferior del contenedor.
Para deshacerse de los espacios en blanco adicionales, hay 3 propiedades que se pueden usar:
- Usando la propiedad de visualización
- Usando la propiedad de alineación vertical
- Usando la propiedad de altura de línea
Comprenderemos estos 3 métodos en detalle, junto con su implementación. Comencemos discutiendo la propiedad de visualización de CSS.
Propiedad de visualización: la solución más utilizada se usa para cambiar la propiedad de visualización de la etiqueta <img> dentro del contenedor <div> del valor predeterminado ‘ en línea ‘ a ‘ bloquear ‘ usando la propiedad de visualización: bloque .
Sintaxis:
display: block;
Ejemplo: este ejemplo describe el uso de la propiedad de visualización para eliminar el espacio en blanco debajo de la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Removing the white space
using the display Property
</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
}
.container img {
display: block;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220111163542/gfg.png"
alt="GFG_logo">
</div>
</body>
</html>
Producción:
Uso de la pantalla: propiedad de bloque
Alineación vertical: el atributo Alineación vertical tiene un valor establecido en ‘línea de base’, de forma predeterminada, que alinea el elemento con la línea de base del padre. El valor del atributo se puede cambiar de línea base a inferior como vertical-align: bottom .
Sintaxis:
vertical-align: bottom;
Ejemplo: este ejemplo describe el uso de la propiedad de alineación vertical para eliminar el espacio en blanco debajo de la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Removing the white space
using the vertical-align
Property
</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
}
.container img {
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220111163542/gfg.png"
alt="GFG_logo">
</div>
</body>
</html>
Producción:
Usando la propiedad de alineación vertical
Propiedad de altura de línea: la propiedad de altura de línea CSS se puede utilizar para establecer la altura de la línea, cuyo valor se establece en normal, de forma predeterminada. Al establecer la altura del contenedor en 0%, se puede eliminar el espacio en blanco.
Sintaxis:
line-height: 0%;
Ejemplo: este ejemplo describe el uso de la propiedad line-height para eliminar el espacio en blanco debajo de la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Removing the white space
using the line-height
Property
</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
line-height: 0%;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220111163542/gfg.png"
alt="GFG_logo">
</div>
</body>
</html>
Producción:
Usando la propiedad de altura de línea
Publicación traducida automáticamente
Artículo escrito por sjasandeep7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA