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

HTMLWeb DevelopmentFront End Technology

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>
raja
Updated on 16-Oct-2022 16:52:20

Advertisements