How to remove the space between inline-block elements?

Last Updated : 23 May, 2024

To remove space between inline-block elements in CSS, ensure no whitespace or line breaks exist in HTML between elements. Alternatively, set the font-size of the parent to 0 and reset for elements, or apply a negative margin to elements. This ensures elements align seamlessly without unwanted spacing.

There are two methods to remove the space between inline-block elements.

Table of Content

Set Font Size to 0 on Parent Element
Using display of the parent element to flex

Set Font Size to 0 on Parent Element

To remove space between inline-block elements, set the font-size of the parent element to 0. Then, reset the font-size for the inline-block children to their desired value, ensuring proper layout without unwanted spacing.

Syntax:

parent-element{
       font-size:0px;
}
parent-element child-element{
       display:inline-block;
       font-size:Required font size;
}

Example: In this example we demonstrates removing spaces between inline-block elements by setting the parent element's font-size to 0 and restoring it for the inline-block children, ensuring proper alignment without unwanted spacing.

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:

space-between-inline-block-elements — space between inline-block elements Example Output

Using display of the parent element to flex

By setting the display property of the parent element to flex, you activate flexbox layout. This enables flexible alignment and distribution of child elements along the main and cross axes, offering powerful control over layout and spacing within the container.

Syntax:

parent-element{
         display:flex;
}
parent-element child-element{
         display:inline-block;
         font-size:Required font size;
}

Example: In this example we use CSS to make the parent element a flexbox container, enabling flexible layout. The child elements are displayed as inline-blocks with a specified font size for proper alignment.

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:

space-between-inline-block-elements-2 — space between inline-block elements Example Output

How To Add Google Maps With A Marker to a Website

manaschhabra2

Improve

Article Tags :

How to remove the space between inline-block elements?

Set Font Size to 0 on Parent Element

Using display of the parent element to flex

Similar Reads

Thank You!

What kind of Experience do you want to share?