html - 親要素はスタイル付きリンクに比例しません

Question

例@JsFiddle

青いボックスを囲む灰色のボックスがそれらに比例しないのはなぜですか？要素の属性のさまざまな組み合わせを試しましたが、正しく機能させることができません。

効果は実際には悪くありませんが、私が望むものではありません。これが発生する理由の説明が役立ちます。前もって感謝します！:)

PS：私はMozillaFirefox15.0.1を使用しています

---

Answer 1

a要素のdisplayプロパティはに設定されていますinline。これは基本的に、それらがテキストとして扱われることを意味し、したがって、それらに適用される「ブロック」タイプのプロパティは、たとえばdivである場合とは異なり、期待どおりに機能しません。

displayプロパティについて学習することはCSSの大部分ですが、この例では、リンクをインラインにするだけでなく、ブロックも使用するようにします。

a { display: inline-block; }

これで、外側のdivは要素のサイズを考慮に入れますがinline-block、以前はリンクを単なるテキストであるかのように扱っていました。