フレックスボックス(display:flex)の余分な余白を消す方法【CSS】

CSS

フレックスアイテムにmargin-topを指定すると、一番上の段に余分な余白ができてしまいます。

これを解決するには、親要素にmargin-top: -30px;のようにネガティブマージンを指定すればOK。

余白を消すというよりかは、親要素ごと上にあげることで余白がないように見えるという裏技!

↓フレックスアイテムにmargin-bottomを指定した場合は、親要素にmargin-bottom: -30px;と指定します。