When styling individual text parts separately, we often use inline elements. However, this can create unwanted space between the text. Many developers struggle with this issue. So, in this answer, we'll explore two quick methods to remove the space between inline and inline-block elements.
Let's dive in!
Solution 1:
Apply the CSS property "display: flex;" to the parent element. This will effectively eliminate the space between inline and inline-block elements.
<head>
<style>
body {
font-family: sans-serif;
}
.parent-with-using-flex {
display: flex;
}
span {
background: black;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div class="parent-with-using-flex">
<span>C</span>
<span>o</span>
<span>d</span>
<span>e</span>
<span>M</span>
<span>a</span>
<span>f</span>
<span>i</span>
<span>a</span>
<span>s</span>
</div>
<p> <strong>With display: flex;</strong></p> <br>
<div class="parent-withaout-using-flex">
<span>C</span>
<span>o</span>
<span>d</span>
<span>e</span>
<span>M</span>
<span>a</span>
<span>f</span>
<span>i</span>
<span>a</span>
<span>s</span>
</div>
<p> <strong>Without display: flex;</strong></p>
</body>
Solution 2:
The second method is to eliminate the gap between inline and inline-block elements by writing all tags on the same line without any spaces in between.
<head>
<style>
body {
font-family: sans-serif;
}
span {
background: black;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div class="parent-with-using-flex">
<span>C</span><span>o</span><span>d</span><span>e</span><span>M</span><span>a</span><span>f</span><span>i</span><span>a</span><span>s</span>
</div>
<p> <strong>span tag without space</strong></p>
<br>
<div class="parent-withaout-using-flex">
<span>C</span>
<span>o</span>
<span>d</span>
<span>e</span>
<span>M</span>
<span>a</span>
<span>f</span>
<span>i</span>
<span>a</span>
<span>s</span>
</div>
<p> <strong>span tag with space</strong></p>
</body>
It's important to remember that even when adjusting the child element's width or using "display: flex" on the parent, you might still have space between inline elements. This space increases as the width increases.
To remove this space, just remove the width setting from the child element. If needed, set the width of its parent instead. This ensures the width applies to the child, removing the space.
<head>
<style>
body {
font-size: 22px;
font-family: sans-serif;
}
.container-1 {
display: flex;
}
.span {
width: 100px;
background: teal;
font-size: 30px;
color: white;
}
.container-2 {
display: flex;
width: 200px;
background: teal;
}
#span {
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<div class="container-1">
<span class="span">Code</span><span class="span">Mafias</span>
</div>
<p><strong>The space will not be removed</strong></p>
<br>
<div class="container-2">
<span id="span">Code</span>
<span id="span">Mafias</span>
</div>
<p><strong>Space removed and width set</strong></p>
</body>
Most developers like the first method, but if you have only a few words, the second way can work well too. I trust you've learned how to remove the space between inline and inline-block elements.
If you have any questions regarding this article or other web development, you can ask them in the question box given below, and you will get answers ASAP!