Appearance
How to Remove the Space Between Inline-block Elements
Removing the space between inline-block elements is one of the most commonly asked questions on the internet. A series of inline-block elements usually has space between them.
Tricks to Remove the Space Between Inline-Block Elements
We can solve this problem with the help of CSS properties. Also, some tricks can remove the space between inline-block elements.
Let’s discuss the following example and give it a solution.
- Create a
<ul>tag, which is used for specifying an unordered list. The<ul>tag is a block-level element. Create<li>tags. Each element of an unordered list is declared inside the<li>tag. - Use the :nth-child() pseudo-class to style the next two
<li>tags.
Example of adding inline-block elements with space:
How to create an unordered list (ul) and list items(li) and give them styles using :nth-child() pseudo-class
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li {
display: inline-block;
width: 150px;
font-size: 20px;
color: #eeeeee;
}
li:nth-child(1) {
background: #1c87c9;
}
li:nth-child(2) {
background: #666666;
}
li:nth-child(3) {
background: #8ebf42;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>Here, we see the space between the inline-block elements. So let’s remove the spaces using some techniques.
- The easiest way is to close the tags on the same line:
Example of how to remove the space between inline-block elements when using ul
html
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>- You can also remove the whitespace by deleting the newlines and spaces between the tags in your source code:
How to Remove the Space Between Inline-block Elements
html
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>Let’s see another way of removing spaces using the margin-right property. In the following example, we set the margin-right: -4px; which removes the spaces between our elements.
Example of removing the space between inline-block elements with the margin-right property:
How to remove the space between inline-block elements with margin-right property?
html
<!DOCTYPE html>
<html>
<head>
<style>
nav a {
display: inline-block;
background: #1c87c9;
margin-right: -4px;
color: white;
font-weight: bold;
text-decoration: none;
font-size: 25px;
}
</style>
</head>
<body>
<nav>
<a href="#">W</a>
<a href="#">3</a>
<a href="#">docs</a>
</nav>
</body>
</html>Note: This hardcoded value works for the example's font size but may break if font sizes change. For a more robust modern solution, consider using the gap property with Flexbox or Grid.
We can achieve the same result by setting the font-size property to 0 for <nav>.
Example of removing the space between inline-block elements with the font-size property:
How to remove the space between inline-block elements with font-size property?
html
<!DOCTYPE html>
<html>
<head>
<style>
nav {
font-size: 0;
}
nav a {
display: inline-block;
background: #1c87c9;
font-size: 25px;
color: white;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<a href="#">W</a>
<a href="#">3</a>
<a href="#">docs</a>
</nav>
</body>
</html>We can remove spaces with Flexbox. Modern browsers support the standard display: flex; property without vendor prefixes.
Example of removing the space between inline-block elements with Flexbox:
How to remove the space between inline-block elements using flex value for display property?
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
}
strong {
display: inline-block;
width: 150px;
font-size: 20px;
padding: 20px;
color: #eeeeee;
text-align: center;
}
strong:nth-child(1) {
background: #1c87c9;
}
strong:nth-child(2) {
background: #666666;
}
strong:nth-child(3) {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Example of How to Remove the Space Between Inline-block Elements</h2>
<div>
<strong>Item 1</strong>
<strong>Item 2</strong>
<strong>Item 3</strong>
</div>
</body>
</html>The CSS float property can also come to help.
Example of removing the space between inline-block elements with the float property:
How to remove the space between inline-block elements using float property?
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
clear: both;
content: " ";
display: table;
}
span {
display: inline-block;
width: 150px;
font-size: 18px;
padding: 10px 15px;
text-align: center;
color: #eeeeee;
float: left;
}
span:nth-child(1) {
background: #1c87c9;
}
span:nth-child(2) {
background: #666666;
}
span:nth-child(3) {
background: #8ebf42;
}
</style>
</head>
<body>
<div>
<span>Item List1</span>
<span>Item List2</span>
<span>Item List3</span>
</div>
<p>Some text</p>
</body>
</html>Result
Inline-block elements with space:
[W](#) [3](#) [docs](#)
Inline-block elements without space: [W](#) [3](#) [docs](#)