良いデザインにはマージン (余白) が適切に設定されているものです。
Webデザインの場合、マージンはCSSのmarginプロパティで設定しますが、「マージンの相殺 (margin collapse)」「入れ子になった要素への対処」「汎用性」などを考慮しなければなりません。
そこで今回は、長年の研究により編み出した、全称セレクタ (ユニバーサルセレクタ) を活用した、使い勝手の良い垂直マージンの設定方法をご紹介します。
良いデザインにはマージン (余白) が適切に設定されているものです。
Webデザインの場合、マージンはCSSのmarginプロパティで設定しますが、「マージンの相殺 (margin collapse)」「入れ子になった要素への対処」「汎用性」などを考慮しなければなりません。
そこで今回は、長年の研究により編み出した、全称セレクタ (ユニバーサルセレクタ) を活用した、使い勝手の良い垂直マージンの設定方法をご紹介します。
Web制作を長くやっている人なら、IE6の「要素拡張問題 (Expanding Box Problem)」を知っているのではないでしょうか?
この「要素拡張問題」は、要素に指定した横幅を無視して、要素の内容が要素の幅を押し広げてしまうというものです。
CSS Grid Layoutのカラム (列) でも、同様の問題が起こったため、その解決方法をご紹介します。