Summary  
This chapter explains the CSS display property by detailing the behaviors and styling capabilities of block, inline, and inline-block elements and how they impact element layout and spacing.

General domain of usage  
Front-end web page layout and styling

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>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxvbD4KICAgICAgPGxpPjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvcD48L2xpPgogICAgICA8bGk+PHA+TG9yZW0gaXBzdW08L3A+PC9saT4KICAgICAgPGxpPjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvcD48L2xpPgogICAgPC9vbD4KICAgIDx1bD4KICAgICAgPGxpPjxoND5Mb3JlbSwgaXBzdW0uPC9oND48L2xpPgogICAgICA8bGk+PGg0PkxvcmVtLCBpcHN1bSBkb2xvci48L2g0PjwvbGk+CiAgICAgIDxsaT48aDQ+TG9yZW0sIGlwc3VtIGRvbG9yLjwvaDQ+PC9saT4KICAgIDwvdWw+CiAgPC9ib2R5Pgo8L2h0bWw+

aDQgewogIHBhZGRpbmc6IDEycHg7Cn0KCnAgewogIGJvcmRlcjogMXB4IHNvbGlkIHRhbjsKfQ==

## 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>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIC8+CiAgICA8c3Bhbj5Mb3JlbSwgaXBzdW0gZG9sb3IuPC9zcGFuPgogICAgPGEgaHJlZj0iIyI+TG9yZW0sIGlwc3VtLjwvYT4KICAgIDxzcGFuPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyLjwvc3Bhbj4KICA8L2JvZHk+CjwvaHRtbD4=

c3BhbiB7CiAgYm9yZGVyOiAycHggc29saWQgd2hlYXQ7Cn0=

## 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.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0ic2VuZC1idG4iPlNlbmQgcmVxdWVzdDwvYnV0dG9uPgogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGNsYXNzPSJzdWJtaXQtYnRuIj5TdWJtaXQgZm9ybTwvYnV0dG9uPgogIDwvYm9keT4KPC9odG1sPg==

LyogU2V0IGNvbW1vbiBzdHlsZXMgZm9yIGFsbCBidXR0b24gZWxlbWVudHMgKi8KYnV0dG9uIHsKICBjdXJzb3I6IHBvaW50ZXI7Cn0KCi5zZW5kLWJ0biB7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIGJhY2tncm91bmQtY29sb3I6IHllbGxvd2dyZWVuOwogIGNvbG9yOiBzbGF0ZWJsdWU7CiAgZm9udC1zaXplOiAyNHB4Owp9Cgouc3VibWl0LWJ0biB7CiAgcGFkZGluZzogNXB4IDE4cHg7CiAgYm9yZGVyOiAxcHggc29saWQgYnJvd247CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Ymx1ZTsKICBjb2xvcjogZGFya2JsdWU7CiAgZm9udC13ZWlnaHQ6IDYwMDsKfQ==

What is the main difference between block and inline elements?

Master the essentials of CSS, the styling language that transforms the look and feel of web pages. Explore core concepts such as text styles, colors, spacing, the box model, Flexbox, and decorative effects. Build the skills to create visually engaging and well-structured web pages.

Understand how CSS connects to HTML and how styles are applied through selectors. Apply colors, text styling, and hover effects to control visual presentation.

Improve typography using line height, spacing, font properties, and custom fonts. Control font families, weight, style, and size for better readability.

Control layout structure using margin, padding, borders, and width properties. Understand box sizing behavior and element display types such as block, inline, and inline-block.

Control horizontal and vertical layouts using Flexbox properties. Adjust direction, alignment, and spacing to structure UI components.

Enhance layouts using background colors, images, pseudo-elements, and shadows. Style visual components for depth and contrast.

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

Display Property Block, Inline, and Inline Block

Block Elements

Inline Elements

Inline-Block Elements

Key Differences