Hay dos métodos para eliminar el espacio entre los elementos del bloque en línea.
Método 1: asigne el tamaño de fuente del padre del elemento de bloque en línea a 0px y luego asigne el tamaño de fuente adecuado al
elemento de bloque en línea
Sintaxis:
elemento principal{
font-size:0px;
}
elemento padre elemento hijo {
display:inline-block;
tamaño de fuente:Tamaño de fuente requerido;
}
El concepto anterior se ilustra con el siguiente código:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Assign font-size of parent element to 0px*/
div {
font-size: 0px;
}
/*Making the element inline-block*/
/*Assign proper font-size to the inline block element*/
div span {
display: inline-block;
background-color: green;
font-size: 10rem;
}
</style>
<title>How to remove spaces between inline block elements</title>
</head>
<body>
<div>
<span>Geeks</span>
<span>For</span>
<span>Geeks</span>
</div>
</body>
</html>
Producción:
Método 2: haga que la visualización del elemento principal se flexione.
Sintaxis:
elemento padre{
pantalla:flex;
}
elemento padre elemento hijo {
display:inline-block;
tamaño de fuente:Tamaño de fuente requerido;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Making the parent element a flexbox*/
div {
display: flex;
}
/*Making the element inline-block*/
/*Assign proper font-size to the inline block element*/
div span {
display: inline-block;
background-color:rgb(53, 77, 5);
font-size: 10rem;
}
</style>
<title>How to remove spaces between inline block elements</title>
</head>
<body>
<div>
<span>Geeks</span>
<span>For</span>
<span>Geeks</span>
</div>
</body>
</html>
PRODUCCIÓN:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA