Display Property Block, Inline, and Inline Block
メニューを表示するにはスワイプしてください
HTML elements behave differently depending on whether they are block, inline, or inline-block. These display types affect layout, spacing, and what CSS properties you can use.
Block Elements
- Start on a new line;
- Take up the full width of their container;
- Support width, height, margin, padding, and border.
Common examples: <div>, <p>, <ul>, <li>, <h1>–<h6>.
index.html
index.css
Inline Elements
- Stay on the same line;
- Take only the space needed for their content;
- Cannot have width or height applied (but border works).
Common examples: <a>, <span>, <img>, <input>.
index.html
index.css
Inline-Block Elements
- Stay inline, like text;
- Support width, height, margin, padding, and border, like block elements.
Examples: <button>, <select>, <textarea>.
They are useful when you need elements to sit side by side, but still allow full styling control.
index.html
index.css
Key Differences
Property | Block | Inline | Inline-Block |
|---|---|---|---|
New line | Yes | No | No |
Full width | Yes | No | No |
Width control | Yes | No | Yes |
Height control | Yes | No | Yes |
すべて明確でしたか？
フィードバックありがとうございます！
セクション 1. 章 12
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
セクション 1. 章 12
