CODEWITHSUNDEEP
htmlcss
Aroniaina
Aroniaina

Reputation: 1252

Inline-block blank space explanation and solution

I searched the solution for space between inline block elements, and I found many solutions (see some of these solution below).

My question is not about solutions, it's about explanation :

div.inline-block{display: inline-block; width: 50px; height: 50px;}
.parent{margin-bottom: 5px;}
.left{float: left;}
.no-font{font-size : 0;}
.minus-spacing{letter-spacing: -1em;}
<!-- THE PROBLEM -->
<div class="parent">
  <div class="inline-block" style="background-color: red;"></div>
  <div class="inline-block" style="background-color: green;"></div>
  <div class="inline-block" style="background-color: blue;"></div>
  <div class="inline-block" style="background-color: yellow;"></div>            
</div>
<!-- SOLUTION 1 : set parent style "font-size : 0;" -->
<div class="parent no-font">
  <div class="inline-block" style="background-color: red;"></div>
  <div class="inline-block" style="background-color: green;"></div>
  <div class="inline-block" style="background-color: blue;"></div>
  <div class="inline-block" style="background-color: yellow;"></div>            
</div>
<!-- SOLUTION 2 : use comments" -->
<div class="parent">
  <div class="inline-block" style="background-color: red;"></div><!--
--><div class="inline-block" style="background-color: green;"></div><!--
--><div class="inline-block" style="background-color: blue;"></div><!--
--><div class="inline-block" style="background-color: yellow;"></div>            
</div>
<!-- SOLUTION 3 : reduce parent letter spacing -->
<div class="parent minus-spacing">
  <div class="inline-block" style="background-color: red;"></div>
  <div class="inline-block" style="background-color: green;"></div>
  <div class="inline-block" style="background-color: blue;"></div>
  <div class="inline-block" style="background-color: yellow;"></div>            
</div>
<!-- SOLUTION 4 : use float -->
<div class="parent">
  <div class="inline-block left" style="background-color: red;"></div>
  <div class="inline-block left" style="background-color: green;"></div>
  <div class="inline-block left" style="background-color: blue;"></div>
  <div class="inline-block left" style="background-color: yellow;"></div>            
</div>

Upvotes: 0

Views: 121

Answers (2)

Mr Lister
Mr Lister

Reputation: 46579

Explanations of the solutions:

  1. if you have a font size of 0, the width of every character is also 0, including the space. So the space is still there, it's just 0px wide.
    Note however, that this solution may not be ideal. When you set font-size:0, some browsers will use the minimum font size (from the user's preferences) , so you may end up with a small space instead of no space.

  2. Comments don't render, so if you use comments instead of whitespace, nothing gets rendered.
    There's also yet another solution: simply don't put anything between the divs in the source; write </div><div> everywhere.

  3. Negative letter spacing puts the letters (and therefore also the words) closer together. It won't cause adjacent elements to overlap though.

  4. Floating also removes all visible whitespace. It has side-effects though, especially if you don't clear the floats, so use this solution sparingly.

Upvotes: 2

gmo
gmo

Reputation: 9000

According to Chris Coyier (@chriscoyier)

This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.

Source: css-tricks.com
* the emphasized in the quote is mine

Upvotes: 3

Related Questions