How to remove the space between inline-block elements?

Last Updated : 10 Aug, 2021

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>