30-seconds-of-code/snippets/remove-inline-block-container-white-space.md

title, tags

title	tags
Remove inline-block container whitespace	layout, beginner

Creates a bouncing loader animation.

<div class="tiles">
  <div class="tile">
    <img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" >
    <h2 class="tile_title">30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" >
    <h2 class="tile_title">30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" >
    <h2 class="tile_title">30 Seconds of CSS</h2>
  </div>
</div>

.tiles {
    width: 900px;
    font-size: 0;
}

.tile {
    width: calc(900px / 3);
    display: inline-block;
}

.tile h2 {
  font-size: 20px;
}

Explanation

Note: 1rem is usually 16px.

1. tiles is the container of the tile component
2. tile is the item that we need to display inline
3. width: calc((900px / 3) - 10px) divides the width of the tile evenly
4. Set font-size: 0; on .tiles to avoid whitespace
5. Set font-size: 20px to h2 in order to display the text

Browser support

• https://www.caniuse.com/#search=inline-block