Understanding Block, Inline, and Inline-Block Elements
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
1. What is the main difference between block and inline elements?
2. Which of the following is an example of a block element?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Geweldig!
Completion tarief verbeterd naar 2.56Understanding Block, Inline, and Inline-Block Elements
Veeg om het menu te tonen
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
1. What is the main difference between block and inline elements?
2. Which of the following is an example of a block element?
Bedankt voor je feedback!
