Margin-Top が HTML のインライン要素で機能しないのはなぜですか?

インライン要素でマージントップが機能しない: インラインの動作を理解する

HTML では、 のような要素が使用されます。

のようなブロックレベルの要素とは異なり、インライン要素とみなされます。または

。ブロックレベルの要素はすべての側のマージンを受け入れることができますが、インライン要素は水平方向のマージンのみを許可します。

CSS のマージン プロパティは、要素を囲むマージン領域の幅を設定します。ブロックレベルの要素に適用すると、マージンは 4 つの辺すべてに影響します。ただし、 のようなインライン要素の場合、垂直マージンは無効です。

CSS 仕様によれば、「垂直マージンは置換されていないインライン要素には影響を与えません。」

解決策:

次のようなインライン要素に垂直方向のマージンを許可するには では、その表示プロパティを「inline-block」または「block」に変更します。

Inline-Block:

• 要素に次のことを許可します。インラインで動作しますが、垂直方向のマージンも有効になります。
• 例:

Block:

• 要素をブロックレベルの要素に変換し、垂直方向と水平方向のマージンを許可します。
• 例:

インライン要素には display: inline-block を使用することをお勧めしますdisplay: ブロックでは要素が別の行に表示される可能性があるため、垂直方向のマージンが必要です。

以上がMargin-Top が HTML のインライン要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。