A few CSS tricks that frontend developers should know


1. Vertical alignment
- I offten use this in a CSS Navigation Menu.

2. Remove white space below image

.img-css {
    width: 300px;
    height: 200px;
    display: block;
.img-css {
    vertical-align: middle
3. Using display: flex, the icon is distorted when the text is long

.cc {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  margin-right: 20px;
  flex-shrink: 0;

4.  Truncate Text
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

5. Disable Text Selection Highlighting
- If we want to disable the highlight effect.
user-select: none;

6. Make a Textarea Unable to Resize

7.  Math with Calc

8. Change an HTML5 Input’s Placeholder Color

The article will still be updated with more cool things about CSS. Thank you for your support and reading until now. 
Thank you!