Os elementos do HTML, quando renderizados no navegador, podem comportar-se basicamente de duas maneiras diferentes no que diz respeito à maneira como eles interferem no documento como um todo: em bloco (block) ou em linha (inline).
Elementos em bloco são aqueles que ocupam toda a largura do documento, tanto antes quanto depois deles. Um bom exemplo de elemento em bloco é a tag < h1>, que já utilizamos em nosso projeto. Note que não há nenhum outro elemento à esquerda ou à direita do nosso nome da loja, apesar da expressão “Mirror Fashion” não ocupar toda a largura do documento. Entre os elementos em bloco, podemos destacar as tags de heading < h1> a < h6>, os parágrafos < p> e divisões < div>.
Elementos em linha são aqueles que ocupam somente o espaço necessário para que seu próprio conteúdo seja exibido, permitindo que outros elementos em linha possam ser renderizados logo na sequência, seja antes ou depois, exibindo diversos elementos nessa mesma linha.
Entre os elementos em linha, podemos destacar as tags de âncora < a>, as tags de ênfase < small>, < strong> e < em> e a tag de marcação de atributos < span>.
Saber a distinção entre essesmodos de exibição é importante, pois há diferenças na estilização dos elementos dependendo do seu tipo.
Pode ser interessante alterarmos esse padrão de acordo comnossa necessidade, por isso existe a propriedade display no CSS, que permite definir qual estratégia de exibição o elemento utilizará.
Por exemplo, o elemento < li> de uma < ul> tem por padrão o valor block para a propriedade display. Se quisermos os elementos na horizontal, basta alterarmos a propriedade display da < li> para inline:
ul li{
display: inline;
}