レイアウト構築の際にマージンやパディングといった、各エレメントの間隔や余白を調整する設定があります。

今回は、エレメントの距離感を指定できるマージンにマイナスの値を設定するネガティブマージンについてと、その具体的な使用方法について解説していきたいと思います。

→マージンやパディングの詳細についてはこちら

マージンの値を設定する際、基本的にはプラスの値、0以上の数値を指定します。

しかし、実際はマイナスの値も設定できます。このマイナス方向に値を設定するマージンのことをネガティブマージンと呼びます。

ネガティブマージンはスタイルパネルのスペースから設定します。

具体的にどのようにネガティブマージンを使用していくか解説します。

エレメントにネガティブマージンを指定すると要素同士を重ねられます。

親子構造にあるエレメントにネガティブマージンを指定すると親要素からはみ出すレイアウトを作成できます。

以下のようにsectionの中にboxがある場合、boxにネガティブマージンを設定することでsectionからはみ出す見え方になります。