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

HTMLWeb DevelopmentFront End Technology

#### Kickstart HTML, CSS and PHP: Build a Responsive Website

Featured

59 Lectures 8.5 hours

#### Web Design for Beginners: Build Websites in HTML & CSS 2022

68 Lectures 8 hours

#### Complete HTML/CSS Course 2022

Featured

47 Lectures 12.5 hours

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>
<title>Inline block elements</title>
<style>
nav a {
display: inline-block;
background: blue;
color: white;
text-decoration: none;
font-size: 35px;
}
</style>
<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>
<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>
<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>
<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>