Summary  
This chapter explains the CSS concept of block-level elements, covering their default `display: block` behavior, how to adjust their width, height, margins, borders and padding, and techniques for centering them within a parent container.

General domain of usage  
Web page layout and styling

Elementos **de bloco** são retangulares e se empilham verticalmente, impedindo que outros elementos compartilhem a mesma linha. Esse comportamento é controlado pela propriedade CSS `display: block`.

Pontos principais sobre elementos de bloco:
- O padrão é `display: block`;
- A largura ocupa toda a largura do contêiner pai;
- A altura é determinada pelo conteúdo, mas pode ser personalizada com CSS;
- Sempre começam em uma nova linha;
- Propriedades como `border`, `margin`, `padding`, `width` e `height` podem ser ajustadas.

Veja um exemplo onde manipulamos `width`, `height` e `margin`:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9Im1haW4tYm94Ij4KICAgICAgPGRpdiBjbGFzcz0iZmlyc3QtYm94Ij4xPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InNlY29uZC1ib3giPjI8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0idGhpcmQtYm94Ij4zPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

Lm1haW4tYm94IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBpbmRpYW5yZWQ7CiAgd2lkdGg6IDEwMHB4OwogIGhlaWdodDogMTAwcHg7Cn0KCi5maXJzdC1ib3ggewogIGJhY2tncm91bmQtY29sb3I6IGRhcmttYWdlbnRhOwogIHdpZHRoOiAzMHB4OwogIGhlaWdodDogNDBweDsKICBtYXJnaW4tbGVmdDogMjBweDsKfQoKLnNlY29uZC1ib3ggewogIGJhY2tncm91bmQtY29sb3I6IHRoaXN0bGU7CiAgd2lkdGg6IDMwcHg7CiAgaGVpZ2h0OiAxNXB4OwogIG1hcmdpbi1sZWZ0OiAzMHB4Owp9CgoudGhpcmQtYm94IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBvbGl2ZWRyYWI7CiAgd2lkdGg6IDUwcHg7CiAgaGVpZ2h0OiA0NXB4OwogIG1hcmdpbi1sZWZ0OiBhdXRvOwp9

Vamos considerar como podemos centralizar um elemento dentro de seu elemento pai.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9InBhcmVudCI+CiAgICAgIFBhcmVudCBFbGVtZW50CiAgICAgIDxkaXYgY2xhc3M9ImNoaWxkIj5DaGlsZCBFbGVtZW50PC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LnBhcmVudCB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzRGNUU3NzsKICBjb2xvcjogI2ZmZmZmZjsKICB3aWR0aDogMzAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKfQoKLmNoaWxkIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMWUyNjM1OwogIGNvbG9yOiAjZmZmZmZmOwogIHdpZHRoOiA2MHB4OwogIGhlaWdodDogNjBweDsKICAvKiBXZSBjYW4gZ2l2ZSBgYXV0b2AgdmFsdWUgdG8gdGhlIGBtYXJnaW5gIHByb3BlcnR5IHRvIHJlY2VudGVyIHRoZSBlbGVtZW50LiAqLwogIG1hcmdpbi1sZWZ0OiBhdXRvOwogIG1hcmdpbi1yaWdodDogYXV0bzsKfQ==

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.

Trabalhando com Elementos de Bloco

Awesome!

Trabalhando com Elementos de Bloco