display: inline-block do CSS
- Página anterior Exemplo de Flutuante do CSS
- Próxima página Alinhamento CSS
display: inline-block
Com display: inline
Em comparação com display: inline-block
Permite definir largura e altura no elemento.
Da mesma forma, se definido display: inline-block, mantém os espaços externos/internos superior/inferior, enquanto display: inline não o faz.
Em comparação com display: block, a principal diferença está no display: inline-block, que não adiciona uma quebra de linha após o elemento, permitindo que ele fique ao lado de outros elementos.
A exemplo, apresentamos os diferentes comportamentos de display: inline, display: inline-block e display: block:
Exemplo
span.a { display: inline; /* span 的默认值 */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; }
Use inline-block para criar links de navegação
Uso comum de display:inline-block
Usado para exibir itens de lista horizontalmente em vez de verticalmente. O exemplo a seguir cria um link de navegação horizontal:
Exemplo
.nav { background-color: yellow; list-style-type: none; text-align: center; padding: 0; margin: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; }
- Página anterior Exemplo de Flutuante do CSS
- Próxima página Alinhamento CSS