displayプロパティ:Block、Inline、Inline-block
メニューを表示するにはスワイプしてください
HTML要素は、ブロック、インライン、インラインブロックのいずれかとして異なる動作をします。これらの表示タイプは、レイアウトや間隔、使用できるCSSプロパティに影響します。
ブロック要素
- 新しい行から開始;
- コンテナの全幅を占有;
- width、height、margin、padding、borderをサポート。
一般的な例: <div>, <p>, <ul>, <li>, <h1>–<h6>。
index.html
index.css
インライン要素
- 同じ行に表示される;
- コンテンツに必要な最小限のスペースのみを占有;
- 幅や高さを指定できない(ただし、ボーダーは適用可能)。
主な例:<a>, <span>, <img>, <input>。
index.html
index.css
インラインブロック要素
- テキストのようにインラインで表示;
- ブロック要素のように幅、高さ、マージン、パディング、ボーダーを指定可能。
例:<button>, <select>, <textarea>。
横並びに配置しつつ、スタイルを細かく制御したい場合に便利。
index.html
index.css
主な違い
プロパティ | ブロック | インライン | インラインブロック |
|---|---|---|---|
改行 | はい | いいえ | いいえ |
全幅 | はい | いいえ | いいえ |
幅の制御 | はい | いいえ | はい |
高さの制御 | はい | いいえ | はい |
すべて明確でしたか?
フィードバックありがとうございます!
セクション 3. 章 4
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
セクション 3. 章 4