Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ displayプロパティ:Block、Inline、Inline-block | ボックスモデルとスペーシング
CSSの基礎

displayプロパティ:Block、Inline、Inline-block

メニューを表示するにはスワイプしてください

HTML要素は、ブロックインラインインラインブロックのいずれかとして異なる動作をします。これらの表示タイプは、レイアウトや間隔、使用できるCSSプロパティに影響します。

ブロック要素

  • 新しい行から開始;
  • コンテナの全幅を占有;
  • width、height、margin、padding、borderをサポート。

一般的な例: <div>, <p>, <ul>, <li>, <h1>–<h6>

index.html

index.html

index.css

index.css

インライン要素

  • 同じ行に表示される;
  • コンテンツに必要な最小限のスペースのみを占有;
  • 幅や高さを指定できない(ただし、ボーダーは適用可能)。

主な例:<a>, <span>, <img>, <input>

index.html

index.html

index.css

index.css

インラインブロック要素

  • テキストのようにインラインで表示;
  • ブロック要素のように高さマージンパディングボーダーを指定可能。

例:<button>, <select>, <textarea>

横並びに配置しつつ、スタイルを細かく制御したい場合に便利。

index.html

index.html

index.css

index.css

主な違い

question mark

ブロック要素とインライン要素の主な違いは何ですか?

正しい答えを選んでください

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 3.  4

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 3.  4
some-alt