この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元スタイルパネルでは、各要素の内側と外側のスペーシング（マージンとパディング）を定義できます。
このレッスンでは、以下のことを学びます：
要素にスペーシングを追加する方法
スペーシングとは、要素の境界の外側（マージン）または内側（パディング）における余白のことです。スペーシングを一つの側面に追加したり、相補的な側面に追加したり、四つの側面全てに一度に追加したりすることができます。
各側面にスペーシングを追加する
要素の一つの側面にマージンまたはパディングを追加するには：
- キャンバス上で要素を選択します。
- 調整したい側面で、パディングまたはマージンのコントロールをクリックしてドラッグします。
また、プリセットのスペーシング値を選択するか、パディングとマージンを手動で調整することもできます：
- マージンまたはパディングのコントロールをクリックします。
- プリセットのスペーシング値をクリックするか、スペーシング値を入力します。
相補的な側面にスペーシングを追加する
相補的な（対向する）側面のスペーシングを変更するには：
- Option（Macの場合）またはAlt（Windowsの場合）キーを押します。
- マージン/パディングのコントロールをドラッグし、プリセットのスペーシング値をクリックするか、スペーシング値を入力します。
全ての側面に一度にスペーシングを追加する
要素の全ての側面に同じ値を適用するには、Shift キーを押しながら、一つの側面のパディング/マージンをドラッグします。また、Shift キーを押しながら、一つの側面のスペーシングコントロールをクリックし、プリセットを選択するか、スペーシング値を入力することもできます。
スペーシングの単位を変更する方法
デフォルトのスペーシング単位はピクセル（px）ですが、単位メニューに表示される任意の単位に変更できます。単位メニューにアクセスするには、任意のスペーシングコントロールをクリックし、スペーシング入力フィールドの右側にある単位（例：PX、%、EM、VW、またはVH）を選択します。
値と単位を入力フィールドに手動で入力することもできます。すべての側面に同じ単位を適用したい場合は、一つの側面のスペーシングコントロールをクリックし、Shift キーを押しながら使用したい単位を入力し、Enter キーを押します。
スペーシング値のリセット
任意の側面のスペーシング値をクリアするには、Option キー（Macの場合）またはAlt キー（Windowsの場合）を押しながら、コントロールの青い値をクリックします。
ネガティブマージンの使用方法
要素にネガティブマージンを追加すると、要素をページ上の自然な位置から外に押し出すことができます。要素を重ねるためにネガティブな値（例：-100）を使用します。
オートマージンを使用して要素を水平に中央に配置する方法
マージンのオートユニットは、フレックスアイテムを特定の側面に押し出すための強力なレイアウトテクニックです。たとえば、親要素内の複数のボタン（flexを使用する親要素内のボタン）の場合、右と左にオートマージンを使用して、これらのボタンを親要素の中央に揃え、その間の余白を均等に分布させることができます。
要素を水平に中央に配置するには、style panel > spacing の中にある要素を中央に配置するボタンを使用します。要素を中央に配置するボタンは、要素の右側と左側のマージンを自動に設定し、表示プロパティは変更されません。マージンは自動的に利用可能なスペースを埋めます。
注意: インライン（inline-block）の表示プロパティを持つ要素は、インラインの設定では水平のスペースが利用できないため、要素を中央に配置するボタン（オートマージン）を使用しても中央に配置することはできません。
隣接する要素間のマージンのトラブルシューティング方法
一部の状況では、隣接する要素のマージンが結合して単一のマージンとなることがあります。これは、マージンの折りたたみとして知られており、一部の状況では上書きされる可能性があるため、混乱することがあります。隣接するグリッドの子要素のマージンは折りたたまれません。
問題の一つは、フッターのコンテンツがデザイナーで見えなくなり、アクセスできなくなる場合です。これは、ナビゲーションバーが絶対位置に配置され、コンテンツがページの下部でBody要素から外に押し出されると、よく起こります。これを避けるためには、ページの最初の要素に固定された位置がない場合、トップにマージンを追加せずに、代わりにBody要素にトップのパディングを追加してください。