ネガティブマージンでボックス間マージンを簡単設定

HTML&CSS

ネガティブマージンとは

ネガティブマージンとは、マイナス値が与えられたmarginプロパティのことを言います。

通常フローの場合、topまたはleftにネガティブマージンを指定した際は、その指定した方向に上、または左に引っ張られたように動きます。
サンプル1

ところが、bottomまたはrightにネガティブマージンを指定した際は、下または右に要素は動きません。その代わり、それに重なった要素を引っ張ります。
サンプル2
サンプル3

ネガティブマージンの便利な使用法

divなどで作成したボックスに右マージン10pxを指定し、ボックスごとの隙間を確保したとします。
次に右マージン20pxを指定し適度なマージン幅を空けます。
ところが右端のボックスにはマージンを空けたくない場合、
親要素に対してボックスにかけただけのマージン幅と同等のマイナスマージンをかけます。
この場合だと−20pxです。そうするとカラム落ちすることなくボックスが並んでくれます。

この例はWebクリエイター能力認定試験 XHTML 1.0対応のサンプル問題の「オススメWalk〜Okayama Walk」で出題されています。
一部分を抜き出して多少脚色したサンプルを用意しました。

サンプル4

色々編集して理解を深めるとよいでしょう。
*脚色は背景色の設定とフロートの影響を無くして親要素が囲めるようにoverflow:hiddenを追加しています。

その他ネガティブマージンを利用したテクニック例です。

サンプル5
サンプル6

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました