17. Elementos de bloco vs elementos inline em HTML

🚀 17ª AULA DO CURSO DE HTML & CSS ONLINE GRÁTIS PARA #MOZ - 1ª turma 🚀 VOCÊ SABIA 🤖 🤚 A diferença entre elementos inline e elementos de bloco no HTML está principalmente na maneira como eles são renderizados e ocupam espaço na página. Aqui estão as principais distinções: 1. Elementos de Bloco (Block-level elements) - Comportamento de Layout: Elementos de bloco ocupam toda a largura disponível de seu contêiner pai. Isso significa que eles começam em uma nova linha e forçam qualquer conteúdo subsequente a ser renderizado abaixo deles. - Exemplos Comuns: `div`, `p`, `h1` a `h6`, `section`, `article`, `header`, `footer`, `ul`, `ol`, `li`, `table`. - Uso: Eles são usados para criar estruturas maiores, como parágrafos, seções e contêineres de conteúdo. Cada elemento de bloco geralmente representa um bloco de conteúdo visualmente distinto na página. 2. Elementos Inline (Inline elements) - Comportamento de Layout: Elementos inline ocupam apenas o espaço necessário para o conteúdo que contêm. Eles não iniciam em uma nova linha e podem coexistir ao lado de outros elementos inline na mesma linha. - Exemplos Comuns: `span`, `a`, `strong`, `em`, `img`, `label`, `input`. - Uso: Eles são usados para estilizar partes menores do conteúdo dentro de um bloco, como destacar uma palavra em negrito ou aplicar um link a uma frase. Elementos inline são ideais para aplicar estilos ou funcionalidades a trechos de texto ou pequenos elementos.