Skip to content
Related Articles

Related Articles

Improve Article
How to remove the space between inline-block elements?
  • Difficulty Level : Expert
  • Last Updated : 23 Nov, 2020

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 elemennt 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:

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :