Propriedades de visualização do CSS: bloco, em linha, e bloco em linha – & como distinguir
Os navegadores Web tratam cada elemento como uma espécie de caixa. Contudo, o CSS tem dois tipos diferentes de caixas – bloco e inline.
Um elemento de bloco começa sempre numa nova linha, e preenche o espaço horizontal à esquerda e à direita na página web. Pode adicionar margens e acolchoamento nos quatro lados de qualquer elemento de bloco – topo, direita, esquerda e fundo.
p>alguns exemplos de elementos de bloco são <div> e <p> tags. Como mostrado abaixo, adicionei também acolchoamento verde em todos os quatro lados de cada elemento do bloco.
elementos em linha
p>elementos em linha não começam numa nova linha, aparecem na mesma linha que o conteúdo e as etiquetas ao seu lado. Alguns exemplos de elementos em linha são <span><strong>, e <img> tags.
Quando se trata de margens e acolchoamento, os navegadores tratam os elementos em linha de forma diferente. Pode-se adicionar espaço à esquerda e à direita num elemento em linha, mas não se pode adicionar altura ao acolchoamento superior ou inferior ou margem de um elemento em linha.
Os elementos em linha podem realmente aparecer dentro de elementos em bloco, como se mostra abaixo. Adicionei acolchoamento branco no lado esquerdo e direito de cada elemento em linha.
/div>>
line-Bloco
Os elementos de bloco de linha são semelhantes aos elementos em linha, excepto que podem ter acolchoamento e margens acrescentadas nos quatro lados. Terá de declarar a exibição: inline-block no seu código CSS.
Um uso comum para usar o inline-block é para criar ligações de navegação na horizontal, como mostrado abaixo. Criei um menu de navegação horizontal com uma cor de fundo laranja.
Existem muitas outras propriedades de exibição também por aí, que pode consultar através dos documentos MDN.
-D.