検索

ホームページ  >  記事  >  ウェブフロントエンド  >  インライン要素とブロックレベル要素の違いは何ですか?

インライン要素とブロックレベル要素の違いは何ですか?

青灯夜游
青灯夜游オリジナル
2021-03-01 16:35:0339314ブラウズ

違い: インライン要素での幅と高さの設定は無効であり、自動的に折り返されませんが、ブロックレベルの要素では幅と高さを設定でき、自動的に折り返すことができます。インライン要素では、マージン設定は左右方向には有効ですが、上下方向には有効ではありません。また、パディング設定は、左右方向には有効ですが、上下には有効ではありません。ブロックレベル要素では、マージンとパディングの両方が有効です。有効。

インライン要素とブロックレベル要素の違いは何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS の基礎では、ブロック要素とインライン要素が頻繁に登場します。実際の開発では、混同されて覚えにくいことがよくあります。では、インライン要素とブロックレベル要素の違いは何でしょうか?以下に紹介させていただきます。

ブロックレベル要素とインライン要素の定義

ブロックレベル要素とは何ですか?

  • 常に新しい行から開始します。

  • 高さ、行の高さ、マージンとパディングはすべて制御可能です。

  • 幅が設定されていない限り、幅はデフォルトでコンテナの 100% になります。

  • インライン要素と他のブロック要素を収容できます

例:

、
、

~

、
、

、

、
    、
    、
    、、
    、

    インライン要素とは何ですか?

    • と他の要素は同じ行にあります。

    • 高さ、行の高さ、マージン、およびパディングは変更できません。

    • 幅はテキストまたは画像の幅であり、変更できません

    • インライン要素にはテキストまたは他のインライン要素のみを収容できます

    例: 、、
    、、、、、