Propriedade Display: Block, Inline e Inline-Block

Os elementos HTML se comportam de maneiras diferentes dependendo se são block, inline ou inline-block. Esses tipos de exibição afetam o layout, o espaçamento e quais propriedades CSS podem ser utilizadas.

Elementos Block

• Iniciam em uma nova linha;
• Ocupam toda a largura do seu contêiner;
• Suportam as propriedades width, height, margin, padding e border.

Exemplos comuns: <div>, <p>, <ul>, <li>, <h1>–<h6>.

Elementos Inline

• Permanecem na mesma linha;
• Ocupam apenas o espaço necessário para seu conteúdo;
• Não permitem aplicação de largura ou altura (mas a borda funciona).

Exemplos comuns: <a>, <span>, <img>, <input>.

Elementos Inline-Block

• Permanecem em linha, como texto;
• Suportam largura, altura, margem, preenchimento e borda, como elementos de bloco.

Exemplos: <button>, <select>, <textarea>.

São úteis quando é necessário que elementos fiquem lado a lado, mas ainda permitam controle total de estilização.

Principais Diferenças