Existem 3 propriedades de display na CSS3, são elas: Inline, block e inline-block. Pode ser difícil num primeiro momento perceber a diferença entre esses três valores, eu pessoalmente demorei um pouco para entender de maneira clara como cada um funciona.
Então vamos de forma rápida e direta explicar cada uma das três e o que as diferencia:
- display: block; Esse é um valor padrão para a maioria das tags html (<div> por exemplo) e é o que mais costumamos usar. Um objeto com esse valor se comporta como um bloco ocupando todo o espaço possível, assim não admite permanecer do lado de outro elemento. Sempre que um elemento estiver com esse valor, imediatamente após ele vem uma quebra de linha. O que faz desse elemento muito útil é o fato de que por ser um bloco podemos editar suas margens (margin), largura (width) e altura (height);
- display: inline; Esse é o valor padrão, por exemplo da tag "span", um elemento com esse valor fica contido em uma linha e por tanto não pode ter suas margens top e bottom configuradas e nem sua largura e altura. Elementos com este valor ocuparão apenas o espaço necessário para sua exibição e podem ter um elemento vizinho na mesma linha;
- display: inline-block; Bom, este valor é uma mistura das caracteristicas de amobos os valores anteriores, ou seja, a linha não será quebrada imediatamente após o elemento e ainda poderemos configurar todas as margens, widht e height do elemento.
Nenhum comentário:
Postar um comentário