Elementos de nível embutido e bloqueado em CSS | Explicado

Elementos de nível embutido e bloqueado em CSS | Explicado
A linguagem fundamental de programação da Web, HTML, consiste em uma vasta gama de elementos que são considerados unidades elementares de uma página da web. Esses elementos podem ser classificados em dois principais grupos que são Elementos embutidos e Elementos de nível de bloco. Estar ciente dessas duas categorias e suas diferenças é altamente significativo. Este tutorial ilumina seus leitores sobre o seguinte;
  1. Elementos embutidos
  2. Elementos de nível de bloco
  3. Como trocar os elementos de nível embutido e bloquear

Vamos começar.

Elementos embutidos

Elementos que consomem apenas a quantidade necessária de espaço são chamados Elementos embutidos. Eles também podem ser referidos como elementos que são exibidos em uma linha.

Esses elementos não começam de uma nova linha, além disso, você pode colocar vários elementos embutidos na mesma linha.

Elementos embutidos html são , , , , , , , , , , , , , , , , , , , , , , , , , , ,
, , , , , e .

Na captura de tela anexada abaixo, você pode ver que é um elemento embutido e está ocupando apenas a quantidade de espaço necessário.

Agora, se você adicionar outro elemento embutido, por exemplo, outro botão, ele não será exibido em uma nova linha, em vez disso, será exibido adjacente ao botão anterior.

É assim que os elementos embutidos funcionam.

Agora que entendemos o conceito de elementos embutidos, vamos explorar elementos de nível de bloco.

Elementos de nível de bloco

Elementos que consomem todo o espaço disponível (da esquerda para a direita) e começam de uma nova linha são considerados como Elementos de nível de bloco.

Os elementos do nível do bloco são capazes de manter elementos embutidos junto com outros elementos de nível de bloco. A maioria dos elementos no HTML são elementos de nível de bloco.

Os elementos de nível de bloco HTML são ,

    ,