As diferenças entre os elementos de nível de bloco e embutidos

HTML é composto de vários elementos que atuam como blocos de construção de páginas da web. Cada um desses elementos se enquadra em uma de duas categorias: elementos de nível de bloco ou um elemento embutido. Compreender a diferença entre esses dois tipos de elementos é uma etapa importante na construção de páginas da web.

Elementos de Nível de Bloco

Então, o que é um elemento de nível de bloco? Um elemento de nível de bloco é um elemento HTML que começa uma nova linha em uma página da web e se estende por toda a largura do espaço horizontal disponível de seu elemento pai. Ele cria grandes blocos de conteúdo, como parágrafos ou divisões de página. Na verdade, a maioria dos elementos HTML são elementos de nível de bloco.

Elementos de nível de bloco são usados dentro do corpo do documento HTML. Eles podem conter elementos embutidos, bem como outros elementos de nível de bloco.

Elementos Inline

Em contraste com um elemento de nível de bloco, um elemento embutido:

Pode começar dentro de uma linha.

instagram viewer

Não inicia uma nova linha.
Sua largura se estende apenas até onde é definida por suas tags.

Um exemplo de elemento embutido é o , o que torna a fonte do conteúdo do texto contida em negrito. Um elemento embutido geralmente contém apenas outros elementos embutidos, ou não pode conter nada, como o
quebrar a marca.

Há também um terceiro tipo de elemento em HTML: aqueles que não são exibidos. Esses elementos fornecem informações sobre a página, mas não são exibidos quando processados em um navegador da web.

Por exemplo:

define metadados.
é o elemento do documento HTML que contém esses elementos.

Alternando Tipos de Elemento Inline e Bloco

Você pode alterar o tipo de um elemento de inline para block ou vice-versa, usando uma destas propriedades CSS:

```
display: bloco; 
```
```
display: embutido; 
```
```
Mostrar nenhum;
```

O CSS propriedade display permite que você altere uma propriedade embutida para bloco, ou um bloco para embutido, ou não exibir em absoluto.

Quando alterar a propriedade de exibição

Em geral, deixe a propriedade display sozinha, mas há alguns casos em que trocar as propriedades de display inline e em bloco pode ser útil.

Menus de lista horizontal: Listas são elementos de nível de bloco, mas se você deseja que seu menu seja exibido horizontalmente, você precisa converter a lista em um elemento embutido para que cada item de menu não comece em uma nova linha.
Cabeçalhos no texto: Às vezes, você pode querer que um cabeçalho permaneça no texto, mas mantenha os valores do cabeçalho HTML. Alterar os valores de h1 a h6 para embutidos permitirá que o texto que vem depois de sua marca de fechamento continue a fluir próximo a ele na mesma linha, em vez de começar em uma nova linha.
Removendo o elemento: Se você deseja remover um elemento completamente do documento fluxo normal, você pode definir a exibição para
```
Nenhum
```
Uma nota, tenha cuidado ao usar display: none. Embora esse estilo torne, de fato, um elemento invisível, você nunca deseja usar isso para ocultar o texto adicionado por motivos de SEO, mas não deseja exibir para os visitantes. Essa é uma maneira infalível de ter seu site penalizado por uma abordagem de chapéu preto para SEO.

Erros comuns de formatação de elemento embutido

Um dos erros mais comuns que um iniciante em design da Web comete é tentar definir uma largura em um elemento embutido. Isso não funciona porque as larguras dos elementos embutidos não são definidas pela caixa do contêiner.

Os elementos embutidos ignoram várias propriedades:

```
largura
```
e
```
altura
```
```
largura máxima
```
e
```
altura máxima
```
```
largura mínima
```
e
```
altura mínima
```

No passado, o Microsoft Internet Explorer (substituído pelo Microsoft Edge) aplicou incorretamente algumas dessas propriedades, mesmo a caixas embutidas. Isso não é compatível com os padrões. Esse pode não ser o caso com as versões mais recentes do navegador da Microsoft.

Se você precisar definir a largura ou altura que um elemento deve ocupar, você desejará aplicar isso ao elemento de nível de bloco que contém seu texto embutido.