CSS Tricks

Vertical Center

Set the same height and line-height

.element {
    height: $ELEMENT_HEIGHT;
    line-height: $ELEMENT_HEIGHT;
}

Distribute gap between grids

$HOW_MANY_GRID_EACH_ROW: 3
$GRID_WIDTH: 100% / 3;
$GAP_WIDTH: 16px;
$DISTRIBUTED_GAP: $GAP_WIDTH * ($HOW_MANY_GRID_EACH_ROW - 1) / $GRID_WIDTH;
.grid {
   width: calc($GRID_WIDTH-$DISTRIBUTED_GAP);
   float: left;
   &:nth-child(3n+2), &:nth-child(3n+3){
      margin-left: $GAP_WIDTH;
   }
}

Padding Content from Header

.header {
    position: fixed;
    height: $HEADER_HEIGHT;
    top: 0;
    left: 0;
    > * {
        margin-top: $HEADER_HEIGHT
    }
}

Input with search icon

--- HTML ----
<div class="input-container">
    <label for="inputID" class="search-icon"> </label>
    <input id="inputID" />
</div>

--- CSS 
.input-container {
    position: relative;
    label {
        position: absolute;
        top: 0; //tune search-icon location
        left: 0; //tune search-icon location;
    }
}

Line-height border-box problem

https://www.w3ctech.com/topic/127

• LineHeight 不計算在box 的範圍之內，所以line-height撐大，chrome deve tool 看不到整個元素的範圍