Add snippet

Align items horizontally without float, flexbox, and grid. 100% browser support and support old browsers

snippets/remove-inline-block-container-white-space.md

@@ -0,0 +1,53 @@
+---
+title: Remove inline-block container whitespace
+tags: layout, beginner
+---
+
+Creates a bouncing loader animation.
+
+```html
+<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>
+```
+
+```css
+.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