Summary  
This chapter explains how display types—block, inline, and inline-block—govern element layout behaviors (line breaking and width) and which CSS properties (like width, height, margin, and padding) can be applied.  

General domain of usage  
Web development

Os elementos HTML se comportam de maneira diferente dependendo se são **bloco**, **inline** ou **inline-block**. Esses tipos de exibição afetam o layout, o espaçamento e quais propriedades CSS podem ser utilizadas.

## Elementos de Bloco
- Iniciam em uma **nova linha**;
- Ocupam **toda a largura** do seu contêiner;
- Suportam as propriedades width, height, margin, padding e border.

Exemplos comuns: `<div>`, `<p>`, `<ul>`, `<li>`, `<h1>–<h6>`.

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

aDQgewogIHBhZGRpbmc6IDEycHg7Cn0KCnAgewogIGJvcmRlcjogMXB4IHNvbGlkIHRhbjsKfQ==

## Elementos Inline
- Permanecem **na mesma linha**;
- Ocupam apenas o **espaço necessário para seu conteúdo**;
- Não permitem definir largura ou altura (mas a borda funciona).

Exemplos comuns: `<a>`, `<span>`, `<img>`, `<input>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIC8+CiAgICA8c3Bhbj5Mb3JlbSwgaXBzdW0gZG9sb3IuPC9zcGFuPgogICAgPGEgaHJlZj0iIyI+TG9yZW0sIGlwc3VtLjwvYT4KICAgIDxzcGFuPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyLjwvc3Bhbj4KICA8L2JvZHk+CjwvaHRtbD4=

c3BhbiB7CiAgYm9yZGVyOiAycHggc29saWQgd2hlYXQ7Cn0=

## Elementos Inline-block
- Permanecem **em linha**, como texto;
- Permitem **largura**, **altura**, **margem**, **preenchimento** e **borda**, como elementos de bloco.

Exemplos: `<button>`, `<select>`, `<textarea>`.

São úteis quando é necessário que os elementos fiquem lado a lado, mas ainda permitam controle total de estilização.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0ic2VuZC1idG4iPlNlbmQgcmVxdWVzdDwvYnV0dG9uPgogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGNsYXNzPSJzdWJtaXQtYnRuIj5TdWJtaXQgZm9ybTwvYnV0dG9uPgogIDwvYm9keT4KPC9odG1sPg==

LyogU2V0IGNvbW1vbiBzdHlsZXMgZm9yIGFsbCBidXR0b24gZWxlbWVudHMgKi8KYnV0dG9uIHsKICBjdXJzb3I6IHBvaW50ZXI7Cn0KCi5zZW5kLWJ0biB7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIGJhY2tncm91bmQtY29sb3I6IHllbGxvd2dyZWVuOwogIGNvbG9yOiBzbGF0ZWJsdWU7CiAgZm9udC1zaXplOiAyNHB4Owp9Cgouc3VibWl0LWJ0biB7CiAgcGFkZGluZzogNXB4IDE4cHg7CiAgYm9yZGVyOiAxcHggc29saWQgYnJvd247CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Ymx1ZTsKICBjb2xvcjogZGFya2JsdWU7CiAgZm9udC13ZWlnaHQ6IDYwMDsKfQ==

Qual é a principal diferença entre elementos block e inline?

Qual das opções a seguir é um exemplo de elemento block?

Domine os conceitos essenciais de CSS (Cascading Style Sheets), a linguagem de estilização que transforma a aparência das páginas web. Explore conceitos fundamentais como estilos de texto, cores, espaçamento, modelo de caixa, Flexbox e efeitos decorativos. Desenvolva habilidades para criar páginas web visualmente atraentes e bem estruturadas. Ideal para iniciantes que desejam estabelecer uma base sólida em CSS.

Aprenda o que é CSS, como conectá-lo ao HTML e como estilizar elementos HTML utilizando seletores. Explore conceitos fundamentais como cores de texto, pseudo-classes de ação do usuário e variáveis em CSS.

Descubra como estilizar e formatar texto em suas páginas web. Aprenda a aplicar fontes personalizadas e explore diversas propriedades de fonte para aprimorar a aparência do texto.

Aprenda os fundamentos do modelo de caixa, que define o layout e o espaçamento dos elementos em uma página web. Explore conceitos como dimensionamento de caixas, adição de espaço aos elementos, trabalho com elementos de bloco e em linha, e utilização de pseudo-classes estruturais e funcionais para estilização avançada.

Descubra o Flexbox, um método avançado de layout em CSS para organizar elementos em linhas e colunas. Aprenda a controlar a direção, o alinhamento e o espaçamento dos elementos horizontal e verticalmente, além de personalizar itens individuais para layouts precisos.

Aprenda a aprimorar o apelo visual de suas páginas web com CSS. Explore técnicas para aplicar cores e imagens de fundo, estilizar imagens, utilizar pseudo-elementos decorativos e adicionar sombras para criar designs impressionantes.

Compreensão dos Elementos Block, Inline e Inline-Block

Elementos de Bloco

Elementos Inline

Elementos Inline-block