上部のマージン要素とインライン要素

CSS では、margin プロパティは要素の境界線の外側の間隔を定義するために使用されます。ただし、特に Firefox でインライン要素でマージントップを使用すると、一般的な問題が発生します。

問題:

インライン要素でマージントップが無視されるように見えるのはなぜですかFirefox では?

答え:

この動作は Firefox に限定されたものではなく、 CSS 2.1 仕様:

マージン プロパティに関する CSS 2.1 仕様:

「垂直マージンは、置換されていないインライン要素には影響しません。」

説明:

テキストなどのインライン要素、 タグと タグには高さと幅が定義されておらず、通常は 1 行のコンテンツとして表示されます。 Margin top は垂直マージンのプロパティで、インライン要素の上にスペースを作成しようとします。ただし、インライン要素にはマージンを収容できる高さがないため、無視されます。

結論:

CSS 仕様に従って、マージン上部は適用されません。インライン要素。インライン要素の上に垂直方向のスペースを追加するには、line-height や padding-top.