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?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Чудово!
Completion показник покращився до 2.56Understanding 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?
Дякуємо за ваш відгук!
