CSSでのマージン率の計算についてあなたが知らないこと
ほとんどのWebデザイナーはCSSをかなりよく知っていると思います。結局のところ、それほど大したことはありません - いくつかのセレクタータイプ、数十のプロパティー、および常識にまとめられているので覚えておく必要がないいくつかのカスケード規則。しかし、ざらざらしたレベルに陥ると、真に理解しているデザイナーはほとんどいないという不明瞭な点がたくさんあります。.
私が過去6ヶ月間オンラインで提供していた無料のCSSテストの結果を調べたとき、私は発見しました 1つの質問 誰も 正しくなった. テストを受けた何千人もの人々の, 正解率は14％未満.
質問はこれにまとまります： マージン率の計算方法?
質問
あなたのサイトにコンテナがあるとしましょう div, そしてその中に、コンテンツ div：
それでは、そのコンテンツをあげましょう div 上余白：
.内容マージントップ：10％;
わかりました、それでそれは10％です…しかし10％ 何? それが問題です 正しく答えることができるのは13.8％の人々だけです. そして覚えておいてください：これらの人々はGoogleにアクセスすることができます!
私がこの質問について好きなのはそれです 答えは明白なはずです. それほど多く、私はほとんどの人がただ推測をしている（そして間違っていると推測している）と疑っています。しかし多分それ しない あなたには明白に見えます。あなたが本当にあなたの想像力を使うのであれば、ブラウザがこのようにマージンを計算することができると考えられる多くの方法があります。.
テストの質問は実際には多肢選択なので、私があなたのためにそれを絞り込んだらどうでしょう。これがあなたの選択肢です：
- コンテンツ部門の身長の10％
- コンテナdivの高さの10％
- コンテンツdivの幅の10％
- コンテナdivの幅の10％
覚えておいて、このリストから正しい答えを選ぶことができるのは13.8％の人々だけです。それは偶然よりもずっと悪い!
答えをよく見てください。知っておくべきことが2つだけあることがわかります。
コンテナまたはコンテンツ?
まず、 コンテンツdiv自体のサイズ、またはコンテナdivのサイズに基づく余白のサイズ?
今ではこれはあくまで問題ではありませんが、あなたはおそらくあなたの本能を信頼することができます。 divをそのコンテナーの幅の50％に設定し、その左右の余白を残りのスペースを埋めるには、当然それぞれ25％に設定します（したがって、パーセンテージは合計で25％になります）。 100％）それが機能するためには、パーセントマージンはコンテナの寸法に基づいている必要があります.
もちろん、テストを受けた人の3分の2がこの部分の答えを正しく得ています。.
幅または高さ?
第二, その要素の幅または高さに基づくマージントップのサイズ?
あなたが注意を払っていたならば、あなたはすでにあなたの警備員にいます。少数の人が正しい答えを選ぶためには、これはトリックな質問になるはずです、正しい?
それでも、私はあなたがほとんど信じられないと信じているに違いない。 答え ではない 高さ. そうではありません.
はい、ここでは上のマージンについて話しています。はい、そのマージンの大きさは垂直方向の寸法です。はい、ブロックがそのコンテナーの高さの50％であり、それに25％の上マージンを与えた場合、コンテナーの高さの25％になると予想されます。. そしてあなたは間違っている.
あなたはそれが高さでなければならないと思っていても気分を悪くしないでください。テストを受ける人々のほぼ80％があなたに同意しています：
それは理にかなっている...いいえ、本当に!
それでも信じない？これがW3C CSS仕様からの引用です。
パーセンテージは生成されたボックスの包含ブロックの幅に対して計算されます. これはmargin-topとmargin-bottomにも当てはまることに注意してください。.
ご参考までに、上下のパディングについても同じことが言えます。境界線に関しては、幅をパーセントで指定するのは違法です。.
ですから、この時点では、おそらくCSSの作成者は ボーカーズ, または彼らはただ本当に愚かなミスをしました。しかし、ここで私はあなたに言うために、包含ブロックの幅に基づいて垂直マージンを置く2つの正当な理由があります：
水平方向と垂直方向の一貫性
もちろん、ブロックの4辺すべてに余白を指定できるようにするための簡単なプロパティもあります。
マージン：10％。
これは以下のように展開されます。
マージントップ：10％。右利幅：10％。マージンボトム：10％。左マージン：10％。
さて、あなたが上記のどちらかを書いたならば、あなたはおそらくブロックの四方の辺すべての余白が同じサイズであると期待するでしょうね？しかし、margin-leftとmargin-rightがコンテナの幅に基づいており、margin-topとmargin-bottomがその高さに基づいている場合、それらは通常異なるでしょう。!
循環依存を避ける
CSSはページの垂直方向に積み重ねられたブロックでコンテンツをレイアウトするので、ブロックの幅は通常その親の幅によって完全に決定されます。言い換えれば、あなたはすることができます 何を気にせずにブロックの幅を計算する 内部 そのブロック.
ブロックの高さは別の問題です。通常、高さ 内容の高さの合計によって異なります. コンテンツの高さを変更すると、ブロックの高さも変わります。問題を見る?
コンテンツの高さを取得するには、コンテンツに適用されている上下の余白を知る必要があります。そしてもしそれらのマージンが親ブロックの高さに依存しているなら、あなたは問題を抱えています。!
垂直方向の余白を 幅 コンテナーのこの循環依存関係を壊し、ページをレイアウトすることを可能にします.
クラスをエース
それで、あなたはそれを持っています：テストに関する最も難しい質問、そして今、あなたはそれに答えることができます。テストの残りの部分でどのようにしたいのか知りたいですか？自分で試してみてください。私は約束します、質問の大部分はこれよりはるかに簡単です.
その間、私は新しい最も難しい質問を探しています！ CSSの詳細は誰にもわかりません。?
編集者注： これはHongkiat.comのために書かれています ケビン・ヤンク. Kevinは1999年以来、Webについて書いてきました。彼の名前には、PHP、CSS、およびJavaScriptに関する書籍があります。彼はまた、Podcastを主催したり、会議で話したり、ビデオトレーニングを作成したりしました。これらはすべてWebについてです。彼は現在、Sit the Testの開発チームを率いています。これは、オンラインテストを作成して受験するためのWebアプリケーションです。.
Hongkiatの詳細：
- Webデザイン：CSSと同等の高さ
- コンテンツを垂直方向に整列させる6つのCSSトリック
- CSSの単位を見る：ピクセル、EM、そして割合
- その中身：CSS3ボックスサイズ
今読む：あなたが知っておくべき10隠しCSS3プロパティ
