Os elementos podem ser classificados como inline ou block, e a distinção reside no comportamento padrão deles.

• Elementos inline tipicamente não começam em uma nova linha e ocupam apenas a largura necessária. Eles permitem que outros elementos se coloquem ao lado deles na mesma linha.
• Elementos block, por outro lado, geralmente começam em uma nova linha e se estendem pela largura total de seu contêiner. Eles criam um novo "bloco" ou "caixa" para o conteúdo.

Elementos de bloco

Elementos de bloco ocupam toda a largura do seu contêiner pai e normalmente começam em uma nova linha. Exemplos de elementos de bloco incluem <div>, <h1> até <h6>, <p>, <ul>, <ol>, <li> e vários outros. Esses elementos podem ter suas propriedades width, height, margin, padding e border personalizadas usando CSS.

Elementos em linha

Elementos em linha não iniciam uma nova linha e ocupam apenas a largura essencial para o seu conteúdo. Exemplos de elementos em linha incluem <a>, <span>, <img>, <input> e vários outros. Ao contrário dos elementos de bloco, elementos em linha não podem receber valores específicos para height, width, margin ou padding usando CSS. No entanto, vale ressaltar que border pode ser aplicado a elementos em linha.

Elementos inline-block

Além dos elementos block e inline, existe uma terceira categoria conhecida como elementos inline-block. Semelhante aos elementos inline, os elementos inline-block não iniciam uma nova linha e ocupam apenas a largura necessária para o seu conteúdo. O que os diferencia é a capacidade de ter propriedades de height, width, margin, padding e border especificadas usando CSS. Exemplos de elementos inline-block incluem <button>, <select> e <textarea>.