CSS で上下 margin のパーセント (%) 指定が上手く行かない原因

margin の % 指定では、親要素のが基準となります。margin-top や margin-bottom の計算も、親要素の高さではなく幅が基準です。高さを基準にするなら calc、position、vertical-align、javascript など別の手段を検討する必要があります。

Webサイトやブログなどのデザインをするひと向けの記事です。

css_margin_specification

margin の % は親要素の大きさが基準となります。
このとき、margin-top や margin-bottom の計算ルールに注意して下さい。

以下のW3C の勧告の通り
margin は親要素のを基準に決まります。
margin-top も margin-bottom高さではなく、幅が基準です。

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for ‘margin-top’ and ‘margin-bottom’ as well. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.

例えば、
親要素が幅 320px のとき、margin-left:50%; は
幅(=320px)の半分なので 160px となります。

親要素が幅 320px のとき、margin-top:50%; は
(=320px)の半分なので 160px となります。

図のように、親要素の高さが 480px であるところから
margin-top が親要素の高さを基準にして 240px ……にはなりません。

Webサイトを作るときなど、
CSS の margin で余白を設定するかと思います。

最近は スマホは 3.5 〜 6 インチ、
タブレットも 7〜10 インチと画面サイズの種類が豊富です。
レスポンシブだったり、拡大縮小で等比表示したりと CSS の設定もちょっと複雑です。

特に等比表示や、縦横の中央寄せでは
パーセント (%) 指定を使うことがあると思います。

margin のパーセント指定の罠を回避するお役に立てば幸いです。

なお、縦方向を調整する別案としては

  • calc
  • position
  • vertical-align
  • CSS ではなく javascript

などがあります。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*