andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: tile-layout-using-inline-block with a side note

Browse Source
This commit is contained in:
Lakshaya Sood
2020-08-08 00:28:07 +02:00
parent 4ba94a7d71
commit 7e64537485
1 changed files with 2 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
snippets/tile-layout-using-inline-block.md
View File

@ -10,6 +10,8 @@ Align items horizontally using `display: inline-block` to create a 3-tile layout
- Use `width: calc((900px / 3))` to divide the width of the container evenly into 3 columns. - Use `width: calc((900px / 3))` to divide the width of the container evenly into 3 columns.
- Set `font-size: 0;` on `.tiles` to avoid whitespace. - Set `font-size: 0;` on `.tiles` to avoid whitespace.
- Set `font-size: 20px` to `h2` in order to display the text. - Set `font-size: 20px` to `h2` in order to display the text.
- Note: If you use relative unit like `em` then using `font-size: 0;` to fight whitespace between the blocks might cause a side effect
```html ```html
<div class="tiles"> <div class="tiles">