マージンとパディングは、要素間や要素内に余白を作成するために使用します。

マージンはボックスの外側の余白です。STIDIOではオレンジで表示されます。

パディングはボックスの内側の余白です。STUDIOでは緑で表示されます。

各辺のマージン、パディングを設定する

以下の方法で、マージン、パディングを設定することができます。

  1. 要素の境界線の中心に表示されるオレンジ、または緑のラベルをドラッグする

  2. 要素を選択し、トップバーの設定画面で数値を入力して設定する

マージンとパディングは、それぞれの辺を個別に設定する方法以外に、上下もしくは左右、または全ての辺を同時に設定することができます。

左右のマージン、パディングを設定する

一度にすばやく左右のマージン、またはパディングに同じ余白を設定するには、設定画面の中央にある鍵マークを1回クリックします。

全辺のマージン、パディングを同時に設定する

一度にすばやく全辺のマージン、またはパディングに同じ余白を設定するには、マージン、パディングを設定する前に、鍵マークを2回クリックします。

ネガティブマージン

オーバーレイ効果を作成するために、ネガティブマージンを使用して要素間の余白をなくすことができます。

トップバーの設定画面で、数値の前に -(マイナス)を入力して設定します。

マージンと横幅の関係性

マージンは、要素の横幅に影響します。

横幅がピクセル(px)で設定されている場合は、マージンを追加しても要素の横幅に影響することはありません。

しかし、横幅がパーセント(%)で設定されている場合は、要素に影響します。

サイズの単位については、こちらをご確認ください。

Did this answer your question?