A declaração display: block faz com que o elemento HTML seja renderizado como bloco, tal como os parágrafos e os cabeçalhos o são. Um bloco contém um espaço em branco tanto em cima como embaixo e não permite outros elementos HTML ao lado.
No exemplo abaixo utilizamos duas tags, sendo uma tag display inblock e a outra inline. Pelo fato da tag div ser display inblock, ela irá ocupar um espaço próprio, enquanto a tag <q> não ocupa espaço próprio, foi apenas separada por conta da tag div
Discord
Whatsapp
Github<div> Olá pessoal! </div>Olá, amigo!</q>
A propriedade display: inline faz com que o elemento HTML seja renderizado inline, dentro do bloco na mesma linha. Geralmente tags usadas em texto são fazem parte do "display inline", uma delas seria a tag de abreviação (abbr), tag para negrito (em), tag de imagem (img) e entre outras..
No exemplo abaixo utilizamos duas tags, ambas são display inline. A frase "Olá pessoal" é uma tag <span> e a frase ao lado é uma tag <q>. Em nossa página ambas as frases ficam no mesmo bloco, no mesmo espaço, e isto ocorre pois tags inline não ocupam espaço próprio
<span> Olá pessoal! </span> <q> Olá, amigo!
</q>
Quando colocamos essa propriedade em um elemento, esse elemento se torna um flex container, a partir daí podemos manipular todos os elementos filhos desse flex container com propriedades novas.
O display flex é muito utilizado posicionar os elementos, pois ele nos proporciona novas propriedades. Digamos que você queira centralizar uma div no meio de sua página, seria bem simples:
body{
display: flex;
justify-content: center; /* Alinha horizontalmente */
align-items: center; /* Alinha verticalmente */
}
Vale lembrar que, após colocarmos o display flex na tag pai, todas as filhas irão ficar juntas em uma única linha, então neste caso podemos utilizar da propriedade "gap" ou "flex-direction". Leia mais sobre ou veja este tutorial
Em breve
..
..