There are two methods to remove the space between inline-block elements.
Method 1: Assign the font size of the parent of the inline block element to 0px and then assign the proper font-size to
the inline block element
Syntax:
parent-element{
font-size:0px;
}
parent-element child-element{
display:inline-block;
font-size:Required font size;
}
The above concept is illustrated by the following code:
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>
|
Output:
Method 2:Make the display of the parent element to flex.
Syntax:
parent-element{
display:flex;
}
parent-element child-element{
display:inline-block;
font-size:Required font size;
}
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>
|
OUTPUT:
