Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Os comportamentos inline e block

Não compreendi muito bem os comportamentos inline e block.

4 respostas

Boa noite, Rodrigo! Como vai?

Tags do tipo block irão ocupar a largura toda de sua página por padrão, independente do conteúdo que ela tiver. Além disso vc consegue manipular largura e altura desses elementos.

Já as tags inline ocuparão apenas a largura e altura de seu conteúdo interno, de modo que vc não consegue alterar esses valores.

Para saber mais:

https://www.w3schools.com/html/html_blocks.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Obrigado, Gabriel! Ficou claro sim. Então se eu entendi corretamente, se eu precisar, por exemplo, posicionar um elemento ao lado do outro, ele não pode ter como comportamento o block e sim inline. Mas porque declarar um elemento com um comportamento com os dois comportamentos?

solução!

Então se eu entendi corretamente, se eu precisar, por exemplo, posicionar um elemento ao lado do outro, ele não pode ter como comportamento o block e sim inline.

Não necessariamente. Os elementos block podem ter sua altura e largura manipulados. Então vc pode, através do CSS, estilizar eles para que fiquem um do lado do outro.

Mas porque declarar um elemento com um comportamento com os dois comportamentos?

Em determinadas situações pode acontecer de vc ter um elemento inline e precisar alterar a largura ou altura dele. É justamente pra isso que existem os elementos inline-block. Vc pode definir um elemento como inline-block através do CSS, fazendo: display: inline-block.

Para saber mais:

https://www.w3schools.com/css/css_inline-block.asp

Os artigos e as explicações me fizeram compreender : )

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software