Hello, there! Se você está aprendendo ou trabalha com CSS, provavelmente já se deparou com a propriedade display, que é essencial para controlar como os elementos aparecem em uma página.
Para ajustar essa propriedade, existem 2 valores que podem ser usados e que vão fazer uma grande diferença na disposição e organização dessa página. Dê uma olhada abaixo para descobrir quais são esses dois valores, como eles funcionam e o que significam em inglês. Check it out!
A propriedade display em CSS define como um elemento HTML será exibido. Dois valores fundamentais usados com display são "block" e "inline", que determinam o comportamento do elemento na página, afetando seu tamanho, layout e interação com outros elementos que estão em volta.
Vamos entender o que esses valores fazem e como o significado das palavras em inglês ajuda a lembrar sua funcionalidade. Take a look:
Em inglês, a palavra block significa "bloco", e isso explica exatamente o comportamento desse valor: ele age como um bloco sólido na página.
Um elemento com display: block é exibido como um bloco, ocupando toda a largura disponível. Isso significa que ele começa em uma nova linha e "empurra" os outros elementos para cima e para baixo, forçando uma quebra de linha antes e depois de si.
Algumas tags comuns que são usadas com display: block por padrão são <p>, <div> e <h1> (como nos títulos e subtítulos desse artigo).
Já a palavra inline significa "em linha" ou "na mesma linha" em inglês, e ela descreve o comportamento de exibir os elementos todos em uma única linha, sem que ocorra uma quebra antes ou depois.
Um elemento com display: inline é exibido na mesma linha que outros elementos, ocupando apenas o espaço necessário para seu conteúdo (o que é diferente de block, que vai ocupar todo o espaço disponível, mesmo que sobre espaço após o seu conteúdo). Quando usamos display: inline o elemento não começa em uma nova linha e nem "empurra" outros elementos para cima ou para baixo, eles ficam todos organizados dentro da mesma linha.
Um exemplo comum ocorre em menus horizontais de páginas web, onde todos os elementos clicáveis são posicionados um do lado do outro, como no topo dessa nossa página de artigos.
Very interesting, right? Have you tried using "display: block" and "display: inline" in your projects? (Muito interessante, não é? Você já experimentou usar "display: block" e "display: inline" nos seus projetos?)
Continue estudando com a gente no nosso artigo "O que é LEGACY CODE em desenvolvimento de software?". See you!
Aproveite e faça nosso teste de nível de inglês. Ou baixe nossa apostila que te ensina como aprender inglês de maneira eficiente!
Quer realmente aprender outras línguas, como inglês e espanhol? Conheça os nossos cursos que reforçam o aprendizado de inglês e espanhol.
