今回の記事では要素を上下左右の好きな方向に食い込ませるccsのやり方について紹介いたします。

結論、marginを使います。

やり方

本来のmarigonの使い方はmarign: ○px;のように使います。

下の画像が何も指定していない時の状態

今回はmargin-top: 100px;とします。

すると上の要素から100px分のスペースが空きます。

これが余白をとる普通のやり方だと思います。

今回の場合は食い込ませるやり方なのでmargin: -〇〇px;と指定します。

仮に上の要素に100px分食い込ませて表示したい場合は、

margin-top: -100px;を指定します。

すると

このように上の要素に下の要素を食い込ませることができます。