Compreensão dos Elementos Block, Inline e Inline-Block
Os elementos HTML se comportam de maneira diferente dependendo se são bloco, inline ou inline-block. Esses tipos de exibição afetam o layout, o espaçamento e quais propriedades CSS podem ser utilizadas.
Elementos de Bloco
- 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>.
index.html
index.css
Elementos Inline
- Permanecem na mesma linha;
- Ocupam apenas o espaço necessário para seu conteúdo;
- Não permitem definir largura ou altura (mas a borda funciona).
Exemplos comuns: <a>, <span>, <img>, <input>.
index.html
index.css
Elementos Inline-block
- Permanecem em linha, como texto;
- Permitem largura, altura, margem, preenchimento e borda, como elementos de bloco.
Exemplos: <button>, <select>, <textarea>.
São úteis quando é necessário que os elementos fiquem lado a lado, mas ainda permitam controle total de estilização.
index.html
index.css
1. Qual é a principal diferença entre elementos block e inline?
2. Qual das opções a seguir é um exemplo de elemento block?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Incrível!
Completion taxa melhorada para 2.56Compreensão dos Elementos Block, Inline e Inline-Block
Deslize para mostrar o menu
Os elementos HTML se comportam de maneira diferente dependendo se são bloco, inline ou inline-block. Esses tipos de exibição afetam o layout, o espaçamento e quais propriedades CSS podem ser utilizadas.
Elementos de Bloco
- 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>.
index.html
index.css
Elementos Inline
- Permanecem na mesma linha;
- Ocupam apenas o espaço necessário para seu conteúdo;
- Não permitem definir largura ou altura (mas a borda funciona).
Exemplos comuns: <a>, <span>, <img>, <input>.
index.html
index.css
Elementos Inline-block
- Permanecem em linha, como texto;
- Permitem largura, altura, margem, preenchimento e borda, como elementos de bloco.
Exemplos: <button>, <select>, <textarea>.
São úteis quando é necessário que os elementos fiquem lado a lado, mas ainda permitam controle total de estilização.
index.html
index.css
1. Qual é a principal diferença entre elementos block e inline?
2. Qual das opções a seguir é um exemplo de elemento block?
Obrigado pelo seu feedback!
