Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to remove the space between inline/inline-block elements in HTML?
When using inline-block elements in HTML, unwanted whitespace often appears between them due to how browsers render whitespace in the HTML markup. This space comes from line breaks, spaces, and tabs between elements in your HTML code. There are several effective methods to remove this spacing.
Understanding the Problem
The space between inline-block elements occurs because browsers treat whitespace characters (spaces, tabs, line breaks) in HTML as actual content. When elements are displayed as inline-block, this whitespace becomes visible as gaps between the elements.
Example Inline-block Elements with Space
Let us first see how the spacing issue appears with a basic navigation example
<!DOCTYPE html>
<html>
<head>
<title>Inline-block Elements with Space</title>
<style>
nav a {
display: inline-block;
background: blue;
color: white;
text-decoration: none;
font-size: 35px;
padding: 10px 15px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>Inline-block Elements with Space</h1>
<p>Notice the gaps between the navigation links:</p>
<nav>
<a href="#">Tutorials</a>
<a href="#">Point</a>
<a href="#">Website</a>
</nav>
</body>
</html>
The output shows visible gaps between the blue navigation buttons
Inline-block Elements with Space Notice the gaps between the navigation links: [Tutorials] [Point] [Website] (blue buttons with visible gaps)
Method 1 Using Font-Size Zero
The most reliable method is setting font-size: 0 on the parent container. This makes the whitespace characters invisible while preserving the font size on child elements.
Syntax
.parent-container {
font-size: 0;
}
.inline-block-element {
font-size: desired-size;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Remove Space with Font-Size</title>
<style>
nav {
font-size: 0;
}
nav a {
display: inline-block;
background: blue;
color: white;
text-decoration: none;
font-size: 35px;
padding: 10px 15px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>Inline-block Elements without Space</h1>
<p>No gaps between the navigation links:</p>
<nav>
<a href="#">Tutorials</a>
<a href="#">Point</a>
<a href="#">Website</a>
</nav>
</body>
</html>
The output shows the navigation buttons without any gaps
Inline-block Elements without Space No gaps between the navigation links: [Tutorials][Point][Website] (blue buttons touching each other)
Method 2 Using Negative Margin
Another approach is using negative margin to pull elements together. The exact negative margin value depends on the font size and may require adjustment.
Syntax
.inline-block-element {
margin-right: -4px; /* Typical value, may need adjustment */
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Remove Space with Negative Margin</title>
<style>
nav a {
display: inline-block;
background: green;
color: white;
text-decoration: none;
font-size: 35px;
padding: 10px 15px;
margin-right: -4px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>Using Negative Margin Method</h1>
<p>Navigation buttons with margin-right: -4px:</p>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
The output displays green buttons without spacing
Using Negative Margin Method Navigation buttons with margin-right: -4px: [Home][About][Contact] (green buttons touching each other)
Method 3 Removing HTML Whitespace
You can eliminate spaces by writing HTML elements without any whitespace between them or using HTML comments to separate elements.
Example No Whitespace in HTML
<!DOCTYPE html>
<html>
<head>
<title>Remove Whitespace in HTML</title>
<style>
nav a {
display: inline-block;
background: purple;
color: white;
text-decoration: none;
font-size: 35px;
padding: 10px 15px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>HTML with No Whitespace</h1>
<p>Elements written without spaces or line breaks:</p>
<nav>
<a href="#">Services</a><a href="#">Products</a><a href="#">Support</a>
</nav>
</body>
</html>
The output shows purple buttons with no gaps
HTML with No Whitespace Elements written without spaces or line breaks: [Services][Products][Support] (purple buttons touching each other)
Method 4 Using Flexbox (Modern Approach)
For modern layouts, CSS Flexbox provides the cleanest solution by eliminating whitespace concerns entirely.
Example
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Solution</title>
<style>
nav {
display: flex;
}
nav a {
background: orange;
color: white;
text-decoration: none;
font-size: 35px;
padding: 10px 15px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>Flexbox Method</h1>
<p>Using display: flex eliminates spacing issues:</p>
<nav>
<a href="#">News</a>
<a href="#">Events</a>
<a href="#">Blog</a>
</nav>
</body>
</html>
Flexbox automatically eliminates whitespace between elements
Flexbox Method Using display: flex eliminates spacing issues: [News][Events][Blog] (orange buttons touching each other)
Comparison of Methods
| Method | Pros | Cons | Browser Support |
|---|---|---|---|
| Font-size: 0 | Reliable, works universally | Must reset font-size on child elements | All browsers |
| Negative Margin | Simple implementation | Value may need adjustment per font-size | All browsers |
| Remove HTML Whitespace | No CSS changes needed | Makes HTML harder to read/maintain | All browsers |
| Flexbox | Modern, clean solution | Changes layout behavior | IE 11+ and modern browsers |
Conclusion
The font-size: 0 method is the most reliable cross-browser solution for removing spaces between inline-block elements. For modern projects, Flexbox provides a cleaner approach that eliminates the whitespace problem entirely. Choose the method that best fits your project's browser support requirements and layout needs.
1K+ Views
