Bloco vs. Inline
Isto deve-se aos diferentes comportamentos display: Bloqueio ou em linha. Vejamos a diferença com um pequeno exemplo. Sem qualquer CSS, crio um modelo HTML com <p> e <span> tags:
<body>
<p>I'm a paragraph</p>
<p>I'm a paragraph too</p>
<span>I'm a word</span>
<span>I'm a word too.</span>
</body>
/div>>/div>
p>P>Pode ver a diferença? Cada <p> tag começa com uma nova linha, mesmo que haja espaço suficiente. Span‘s, no entanto, mostrados lado a lado.
Todos os elementos HTML têm um valor de exibição padrão. – W3
Por defeito, os elementos HTML têm um comportamento de exibição como bloco ou em linha. Os elementos que cada um começa com uma nova linha (<p> tags neste exemplo) são chamados elementos de nível de bloco, e os outros (<span>) que podem ser colocados lado a lado são elementos em linha.
Existem algumas características diferentes entre elementos em bloco e em linha:
Elementos de nível de bloco
- Tirar completowidth (100% width) by default
- Li>Cada é exibido numa nova linha
- Li>Largura &A altura pode ser definida
- Pode conter outros elementos em bloco ou em linha
Desde <p> as etiquetas são elementos de nível de bloco, largura & propriedades de altura podem ser definidas:
p {
height: 100px;
width: 100px;
background: red;
color: white;
}
Se nenhuma largura fosse declarada aqui, então a largura padrão de <p> seria 100%. No entanto, declarei uma largura de 100px e o próximo <p> elemento ainda começa com uma nova linha:
>/div>>>>>>fcaption>Block-elementos de nível requerem sempre uma nova linha
Elementos em linha
- Tem apenas o espaço de que necessitam
- Displayed side by side
- Não aceitar propriedades de largura ou altura, e margem superior inferior
- Pode ser um pai de outros elementos em linha
Podemos alterar o comportamento de exibição dos elementos. Portanto, vamos alterar o comportamento de exibição de <p> tag para inline:
p {
height: 100px;
width: 100px;
background: red;
color: white;
display: inline;
}
Desde que o nosso <p> tag é agora um elemento em linha, serão colocados lado a lado e a largura & propriedades de altura já não têm qualquer efeito:
p>Ver uma lista completa de tags HTML como bloco & inline elements.