O que é o Inline-Block?

Perguntado por: omeireles . Última atualização: 17 de julho de 2023
3.9 / 5 7 votos

Com o inline-block você terá o comportamento de um elemento inline, porém permitindo que altere as margens, altura, largura e padding do seu elemento assim como um elemento do tipo block.

"Inline" é uma categorização dos elementos do HTML, em contraste com os "elementos de bloco" (en-US). Os elementos inline podem ser exibidos em nível de bloco ou outros elementos inline.

O <img> é um elemento inline (em linha, com o valor de display igual a inline-block ). Ele pode ser centralizado facilmente adicionando a propriedade de CSS text-align: center; ao elemento pai que o contém.

Espaço com a tag HTML <p>
A tag <p> permite a inserção de parágrafos no conteúdo HTML. Por si só, o uso desta tag nos permite espaçar um parágrafo do outro, mesmo que no código eles estejam na mesma linha.

Exemplos de elementos bloco:

  • div (division, ou divisão, tag bloco genérica)
  • h1 até h6 (títulos)
  • p (parágrafo)
  • blockquote (citação em bloco)
  • ul (lista não ordenada)
  • ol (lista ordenada)
  • form (para formulários, veremos mais na unidade "Trabalhando com Formulários")

A diferença básica entre o inline e block é que o navegador acomoda os elementos de bloco um abaixo do outro e os inline à esquerda um ao lado do outro.

Elementos HTML (Linguagem de marcação de hipertexto) historicamente foram categorizados como "nível de bloco" ou elementos "em linha" (en-US). Um elemento em nível de bloco ocupa todo o espaço de seu elemento pai (container), criando assim um "bloco".

Você pode criar um grid de caixas que preenchem a largura do navegador e quebram suavemente. Isso tem sido possível por muito tempo utilizando o float , mas agora com o valor inline-block da propriedade display é bem mais fácil.

A propriedade vertical-align pode ser usada em dois contextos: Para alinhar verticalmente a caixa de um elemento inline dentro da caixa de linha que a contém. Por exemplo, pode ser usado para posicionar verticalmente uma imagem em uma linha de texto. Para alinhar verticalmente o conteúdo de uma célula em uma tabela.

Centralizar em CSS: elementos de texto
Esse é o caso mais simples, basta você usar a propriedade text-align: center . Apesar da propriedade começar com a palavra text, os elementos inline, como span ou strong , não sofrem nenhuma alteração.

Qual a diferença entre as tags DIV e SPAN? As tags DIV e SPAN são muito similares, com a única diferença que enquanto a tag span serve ao código a nível de linha, a tag div serve ao código a nível de bloco. Ao agrupar elementos em bloco, a tag div trabalha com um volume maior de informações e formatações.

Toda página HTML usa essas três tags: A tag <html> é o elemento raiz que define todo o documento HTML. A tag <head> contém metadados sobre o título e a codificação de caracteres da página. A tag <body> inclui todo o conteúdo que aparece na página.

É utilizando o caracter especial Non-breaking space 3, no HTML ele é invocado assim: &nbsp; . Esse caractere funciona como um espaço, mas, no momento da quebra da linha, ele não vai ser considerado. É como se "Um Basquete" fosse uma palavra só sob a regra padrão de quebra de linha, na qual uma palavra é indivisível.

Blocos econômicos são como pactos entre duas ou mais nações, nos quais o objetivo principal é facilitar as transações comerciais entre governos, bem como entre as empresas.

c) O bloco-diagrama é uma representação gráfica elaborada em perspectiva que mostra determinada área da superfície da Terra nas três dimensões: comprimento, largura e altura.