How to remove the space between inline/inline-block elements in HTML?

We can easily remove the space between inline-block elements. Before moving further, let us first create an HTML document and add inline-block elements with space.

Inline-block elements with space

We will set the style for inline block element using the display property with value inline-block −

nav a {
   display: inline-block;
   background: blue;
   color: white;
   text-decoration: none;
   font-size: 35px;
}

We have set the above style for the below given <nav> element −

<nav>
   <a href="#">Tutorials</a>
   <a href="#">point</a>
</nav>

Let us now see the complete example to add inline-block elements with space −

Example

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      nav a {
         display: inline-block;
         background: blue;
         color: white;
         text-decoration: none;
         font-size: 35px;
      }
   </style>
</head>
<body>
   <h1>The inline-block elements</h1>
   <p>Below are the inline-block elements with space:</p>
   <nav>
      <a href="#">Tutorials</a>
      <a href="#">point</a>
   </nav>
</body>
</html>

Remove the space between inline-block elements using the font-size property

We can remove the space between inline-block elements using the font-size property. The font-size property affects the size of an element's text. Here are the possible values −

  • xx-small − Sets the element's text to be a size smaller than that which results from the value x-small.

  • x-small − Sets the element's text to be a size smaller than that which results from the value small.

  • small − Sets the element's text to be a size smaller than that which results from the value medium.

  • medium − Sets the element's text to be a size smaller than that which results from the value large, and larger than that which results from the value small.

  • large − Sets the element's text to be a size larger than that which results from the value medium.

  • x-large − Sets the element's text to be a size larger than that which results from the value large.

  • xx-large − Sets the element's text to be a size larger than that which results from the value xlarge.

  • larger − Sets the element's text to be larger than that of its parent.

  • smaller − Sets the element's text to be smaller than that of its parent.

  • length − Any permitted length value. Negative length values are not permitted for font-size.

  • percentage − Sets the element's text size relative to that of its parent.

Let us now see an example to remove the space between inline-block elements −

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements without space</title>
   <style>
      nav {
         font-size: 0;
      }
      nav a {
         display: inline-block;
         background: blue;
         color: white;
         text-decoration: none;
         font-size: 35px;
      }
   </style>
</head>
<body>
   <h1>The inline-block elements</h1>
   <p>Below are the inline-block elements without space:</p>
   <nav>
      <a href="#">Tutorials</a>
      <a href="#">point</a>
   </nav>
</body>
</html>

Remove the space between inline-block elements using the marginright property

We can remove the space between inline-block elements using the margin-right property −

Example

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements without space</title>
   <style>
      nav a {
         display: inline-block;
         background: blue;
         margin-right: -4px;
         color: white;
         text-decoration: none;
         font-size: 35px;
      }
   </style>
</head>
<body>
   <h1>The inline-block elements</h1>
   <p>Below are the inline-block elements without space:</p>
   <nav>
      <a href="#">Tutorials</a>
      <a href="#">point</a>
   </nav>
</body>
</html>

Updated on: 16-Oct-2022

890 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements