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?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Génial!
Completion taux amélioré à 2.56Understanding Block, Inline, and Inline-Block Elements
Glissez pour afficher le menu
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?
Merci pour vos commentaires !
