CSS: Basic to Brilliance シリーズの次の投稿は次のとおりです:

レクチャー 10: CSS マージン – 要素の周囲の間隔

この講義では、HTML 要素の周囲のスペースを制御する CSS マージンについて詳しく説明します。余白は、Web ページ上の要素のレイアウトと位置を決定する際に重要な役割を果たし、要素が重ならないようにし、適切な間隔を確保します。

1.マージンとは何ですか?

マージンは、要素の境界線の外側のスペースを定義します。要素を互いに遠ざけたり、要素間にスペースを作成したりするために使用できます。

基本構文:

element {
    margin: value;
}

値は、ピクセル (px)、パーセント (%)、または 自動で指定できます。

2.四辺の余白を設定する

要素のすべての側面にマージンを設定する最も簡単な方法は、margin プロパティを使用することです。

例：

.box {
    margin: 20px; /* 20px margin on all sides */
}

これにより、要素の周囲に 20 ピクセルのスペースが追加されます。

3.各辺の個別のマージン

要素の各辺に個別にマージンを設定することもできます:

• マージントップ
• マージン右
• マージンボトム
• 左マージン

例：

.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 15px;
    margin-left: 5px;
}

これにより、各辺の余白をカスタマイズできるようになり、レイアウト設計の柔軟性が向上します。

4.マージンの短縮プロパティ

margin プロパティは、最大 4 つの値を受け入れて、速記で各辺のマージンを定義します。

例：

.box {
    margin: 10px 20px 15px 5px;
}

• 上マージン: 10px
• 右マージン: 20px
• 下余白: 15px
• 左マージン: 5px

2 つの値のみを指定した場合、最初の値は上下に適用され、2 番目の値は左右に適用されます。

例：

.box {
    margin: 10px 20px; /* Top/Bottom: 10px, Left/Right: 20px */
}

5.マージン付きの自動センタリング: auto

margin: auto の使用は要素を水平方向に中央揃えにする簡単な方法で、固定幅を持つ div などのブロック要素でよく使用されます。

例：

.centered-box {
    width: 300px;
    margin: 0 auto; /* Horizontally centers the element */
}

これにより、ボックスがコンテナ内の中央に配置されます。

6.負のマージン

CSS では負のマージン値が許可されており、要素を近づけたり、重なったりする可能性があります。

例：

.overlap-box {
    margin-top: -10px; /* Pulls the element upwards by 10px */
}

負のマージンを使用する場合は、意図しない重なりやレイアウトの問題が発生する可能性があるため注意してください。

7.マージンコラプス

マージンのある 2 つのブロックレベル要素が隣り合って配置されると、それらの垂直マージンが 1 つに「折りたたまれる」場合があります。 2 つのマージンを加算する代わりに、2 つのマージンのうち大きい方が使用されます。

例：

.box-1 {
    margin-bottom: 20px;
}

.box-2 {
    margin-top: 30px;
}

この場合、マージンが折りたたまれるため、2 つのボックス間のマージンは 50 ピクセルではなく 30 ピクセルになります。

結論

マージンは、要素の周囲にスペースを作成し、レイアウト フローを制御するために不可欠です。要素を中央に配置する場合でも、間隔を調整する場合でも、要素を重ねる場合でも、余白を効果的に使用する方法を理解すると、デザインをより細かく制御できるようになります。

LinkedIn でフォローしてください

リドイ・ハサン