diff --git a/snippets/remove-inline-block-container-white-space.md b/snippets/remove-inline-block-container-white-space.md new file mode 100644 index 000000000..c1146c016 --- /dev/null +++ b/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 +
+
+ placeholder +

30 Seconds of CSS

+
+
+ placeholder +

30 Seconds of CSS

+
+
+ placeholder +

30 Seconds of CSS

+
+
+``` + +```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