Skip to content
Related Articles

Related Articles

Improve Article

How to remove the space between inline-block elements?

  • Difficulty Level : Expert
  • 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>

OUTPUT:

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :