Trabalhando com Elementos Inline
Elementos inline permanecem em uma única linha e passam para a próxima linha quando o espaço se esgota. Esse comportamento é controlado pela propriedade CSS display: inline.
Pontos principais sobre elementos inline:
- O padrão é
display: inline; - Sua largura e altura são determinadas pelo conteúdo e não podem ser definidas explicitamente;
- Apenas propriedades horizontais como
padding,margineborderpodem ser aplicadas.
Vamos analisar um exemplo em que alguns estilos afetam o elemento, enquanto outros não, dentro do arquivo CSS:
index.html
index.css
Por padrão, elementos inline possuem um espaço à direita; para elementos img, esse espaço fica na parte inferior. Esse espaço não é atribuído ao padding ou margin. Em vez disso, é um espaço em branco inerente adicionado pelos navegadores para garantir uma distância entre cada elemento.
index.html
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.56Trabalhando com Elementos Inline
Deslize para mostrar o menu
Elementos inline permanecem em uma única linha e passam para a próxima linha quando o espaço se esgota. Esse comportamento é controlado pela propriedade CSS display: inline.
Pontos principais sobre elementos inline:
- O padrão é
display: inline; - Sua largura e altura são determinadas pelo conteúdo e não podem ser definidas explicitamente;
- Apenas propriedades horizontais como
padding,margineborderpodem ser aplicadas.
Vamos analisar um exemplo em que alguns estilos afetam o elemento, enquanto outros não, dentro do arquivo CSS:
index.html
index.css
Por padrão, elementos inline possuem um espaço à direita; para elementos img, esse espaço fica na parte inferior. Esse espaço não é atribuído ao padding ou margin. Em vez disso, é um espaço em branco inerente adicionado pelos navegadores para garantir uma distância entre cada elemento.
index.html
Obrigado pelo seu feedback!
