間隔

箱が 3 つあるとします 間隔が必要 そのためには、CSS でいくつの方法が思い浮かびますか。

下向きの矢印が付いた、縦に並んだ 3 つのボックス

margin プロパティを使用すると、必要な情報を取得できますが、 不要なスペースが追加されることがあります。 たとえば、各要素の間にあるスペースのみをターゲットに設定するにはどうすればよいでしょうか。 「gap」などが適している可能性があります。 UI 内のスペースを調整する方法はたくさんありますが、 それぞれに強みと注意点があります

HTML のスペース

HTML 自体には、要素の間隔を空ける方法がいくつかあります。 <br> 要素と <hr> 要素を使用すると、ブロック方向に要素を配置できます。 ラテン系の言語の場合 上から下になります。

<br> 要素を使用する場合、 改行が挿入されます。 ワード プロセッサで Enter キーを押すようなものです。

<hr> は、両側にスペースがある水平線(margin)を作成します。

HTML 要素を使用するだけでなく HTML のエンティティを使用すると、スペースを作成できます。 HTML エンティティは予約された文字列で、ブラウザによって文字エンティティに置き換えられます。 たとえば HTML ファイルに &copy; と入力すると、 ©の文字に変換されます &nbsp; エンティティは、改行なしの空白文字に変換されます。 インライン スペースを提供します。 ただし、 なぜなら、この文字は分割しないという特徴により、2 つの要素をつなぎ合わせているからです。 異常な動作が発生する可能性があります

マージン

要素の外側にスペースを追加したい場合は margin プロパティを使用します。 マージンは、要素の周囲にクッションを追加するようなものです。 margin プロパティは margin-top の省略形です。 margin-rightmargin-bottommargin-left

ボックスモデルの 4 つの主要領域の図。

margin 省略形は、特定の順序でプロパティを適用します。 上、右、下、左です。 覚えやすいよ、TRouBLe。

「問題」という言葉T、R、B、L と下降しています
上、右、下、左に拡張されています
ルートを示す矢印が付いたボックス。

margin 省略形は、1、2、3 の値でも使用できます。 4 つ目の値を追加すると、それぞれの面を設定できます。 これらは次のように適用されます。

  • 1 つの値がすべての面に適用されます。(margin: 20px)を更新します。
  • 値は 2 つあります。1 つ目の値は上下両側に適用されます。 2 つ目の値は左側と右側に適用されます。 (margin: 20px 40px
  • 3 つの値: 最初の値は top、 2 つ目の値は leftright です。 3 つ目の値は bottom です。(margin: 20px 40px 30px)。

マージンは長さで定義できます。 パーセンテージまたは自動値(1em20% など)。 割合で指定する場合は 値は、要素を含むブロックの幅に基づいて計算されます。

つまり、要素を含むブロックの幅が 250px の場合、 要素の margin 値が 20% の場合: 要素の両辺のマージンは 50px として計算されます。

マージンには値 auto を使用することもできます。 サイズが制限されているブロックレベルの要素の場合、 auto の余白は、適用された方向の空きスペースを占有します。 良い例です フレックスボックス モジュールを使用します。このモジュールでは、アイテムが互いに押し出されます。

auto マージンのもう一つの好例は、最大幅の横方向の中央に配置されたラッパーです。 この種のラッパーは、ウェブサイトで一貫したセンターカラムを作成するためによく使用されます。

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

ここでは、上側と下側(ブロック)の余白が削除されています。 auto は、左右(インライン)のスペースを共有します。

マイナスの利益率

負の値はマージンにも使用できます。 隣接する兄弟要素の間にスペースを設けるのではなく 間のスペースが減ります。 その結果、要素が重なり合ったり、 使用可能なスペースを超える負の値を宣言すると、このエラーが発生します。

マージン折りたたみ

利益率の縮小は 注意が必要な概念です インターフェースを構築する際にはよく遭遇します。 見出しと段落の 2 つの要素があり、それぞれに縦方向の余白があるとします。

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>
h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

一見すると 段落と見出しの間隔を 5em と決めても問題ありませんが、 2rem3rem を合わせると 5rem になるからです。 ただし、縦方向の余白は縮小されるため、実際にはスペースは 3rem になります。

マージンの折りたたみは、隣接する 2 つの要素の最大値を選択することで機能します。 隣接する辺に垂直方向の余白を設定します h1 の下部は p の上部と接触しています。 h1 の下余白と p の上余白の最大値が選択されます。 h1 の下余白を 3.5rem とすると、 それらの間のスペースは 3rem より大きいため、3.5rem になります。 ブロックの余白のみが折りたたまれ、インライン(水平)の余白は閉じません。

マージンの折りたたみ機能は、要素が空の場合にも役立ちます。 上下の余白が 20px の段落がある場合、 40px ではなく、20px のスペースのみが作成されます。 ただし、この要素内になんらかの要素が追加された場合、 padding を含む場合、余白は折りたたまれなくなり、コンテンツのあるボックスとして扱われます。

理解度をチェックする

余白の折りたたみに関する知識を確認する

2 つの要素が積み重ねられている場合は、両方に 20 ピクセルの上余白を設定します。 30 ピクセルの下余白がある場合、その間のスペースはどれくらいになりますか?

40px
10px
20px
30 ピクセル

余白の折りたたみを防止しています

要素を絶対位置にすると position: absolute を使用すると、余白が折りたたまれなくなります。 float プロパティを使用しても、マージンは折りたたまれません。

ブロック マージンが設定された 2 つの要素の間に余白のない要素がある場合、 余白も折りたたまれません ブロック マージンが設定された 2 つの要素は、もはや隣接する兄弟ではなく、単なる兄弟だからです。

レイアウト レッスンでは、 Flexbox と Grid のコンテナは ブロックコンテナによく似ていますが 子要素の処理方法も大きく異なります これはマージンの折りたたみについても同様です。

このレッスンの元の例を参考にして、フレックスボックスと列方向の 余白が合算され 表示されます。 これにより、レイアウト処理、 これに対応するために Flexbox と Grid のコンテナを設計しました

マージンとマージンの縮小はわかりにくいことがありますが その仕組みを詳しく理解しておくと役立ちます こちらの詳しい解説 を強くおすすめします。

パディング

箱の外にスペースを作るのではなく、 margin のように、 padding プロパティを使用すると、箱の内側にスペースが作られます。 断熱材のようなものです

パディングが箱の内側にあることを示す、内側に向けた矢印が付いたボックス

使用しているボックスモデルに応じて異なります。モデルについては、 ボックス モデル レッスン - padding も要素の全体的なサイズに影響する可能性があります。

padding プロパティは、padding-toppadding-rightpadding-bottompadding-left の省略形です。 margin と同様に、padding にも論理プロパティがあります。 padding-block-startpadding-inline-endpadding-block-endpadding-inline-start

位置付け

また、layout モジュールでも説明されていますが、 positionstatic 以外の値を設定した場合、 toprightbottomleft プロパティを使用して、要素に間隔を空けることができます。 これらの方向の値の動作には次のような違いがあります。

  • position: relative が指定された要素は、ドキュメント フロー内での位置を維持します。 パフォーマンスが向上します 要素の位置にも相対的になります。
  • position: absolute を含む要素 は、相対的な親の位置を基準として方向の値を設定します。
  • position: fixed を含む要素 ビューポートを方向の値とします。
  • position: sticky を含む要素 は、ホルダーが装着または停止している場合にのみ方向の値を適用します。

論理プロパティ モジュールでは、 inset-block プロパティと inset-inline プロパティについて学びます。 記述モードに対応する方向の値を設定できます。

どちらのプロパティも、startend の値を組み合わせた省略形です。 そのため、startend にどちらか一方の値を設定するか、 2 つの個別の値があります

グリッドとフレックスボックス

最後に、グリッドとフレックスボックスの両方で、gap プロパティを使用して子要素のスペースを作成できます。 gap プロパティは row-gapcolumn-gap の省略形です。 1 つまたは 2 つの値(長さまたは割合)を指定できます。 unsetinitialinherit などのキーワードも使用できます。 1 つの値のみを定義する場合 行と列の両方に同じ gap が適用されます。 両方の値を定義すると 最初の値は row-gap、2 番目の値は column-gap です。

Flexbox と Grid のどちらも、分散や配置の機能を使用してスペースを作ることができます。 このモジュールで取り上げる grid モジュールflexbox モジュール

ギャップのあるグリッドを表現した図

一貫したスペースの作成

戦略を選択して継続するのはとても良いことです。 をお役立てください。 これを実現するには、間隔に一貫した尺度を使用することをおすすめします。

たとえば、20px を使用することを確約できます。 要素間のすべてのギャップ(ガター)に対する一貫した尺度であるため、 すべてのレイアウトのデザインに一貫性があります。 また、フロー コンテンツ間の垂直方向のスペースとして 1em を使用することもできます。 これにより、要素の font-size に基づいて一貫した間隔が確保されます。 どちらを選択しても これらの値を変数(または CSS カスタム プロパティ)として保存します。 これらの値をトークン化し、整合性を若干簡単にします。

要素間の間隔を一定にする
レイアウトには 20px、フローコンテンツには 1em を使用します。

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

このようなカスタム プロパティを使用すると、一度定義すれば、 CSS 全体で使用できます これらが更新されると 要素内でローカルにすることも、グローバルに 値はカスケードに渡され、更新された値が反映されます。

理解度をチェックする

間隔に関する知識をテストする

次のような場合は、スペースの挿入に HTML を使用しても安全です。

1 つだけです。
ドキュメントの理解を助けます。
誰も気づかないよ。
宇宙だけだよ。

ボックスの内側にスペースを作成するには、次のコマンドを使用します。

Gap
HTML
パディング
マージン

ボックスの外側にスペースを作成するには、次のコマンドを使用します。

Gap
パディング
HTML
マージン

ボックス間にスペースを作成するには...

Gap
パディング
マージン
HTML