Webサイトやブログなどのデザインをするひと向けの記事です。
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万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。
