Dicas sobre desenvolvimento de software, gestão e tributações

Rede Social

14 de julho de 2020

CSS: Propriedade Display




No post de hoje vou mostrar a propriedade Display do CSS.

Como visto na imagem acima temos dois valores principais para o Display, o Block e o Inline, além do nome que não exibe nada e o inline-block que é a mistura dos comportamentos do inline e do block juntos, mas calma vou explicar um a um. Existem ainda outros valores, mas por hoje vamos focar nesses quatro principais e mais usados.

display: none
Esse valor faz com que o elemento não seja exibido na página, o elemento HTML não é renderizado.

display: block
Esse valor faz com que o elemento seja tratado como exclusivo em uma linha, ou seja, apenas esse elemento ocupará a linha toda, por mais que a largura do elemento ocupe a metade da página, nada estará ao seu lado (existem jeitinhos de se alterar isso, mas não é o padrão), semelhante ao que temos no HTML com o <p>, a altura tem um comportamento normal.

display: inline
Esse valor faz com que o elemento permita posicionar elementos ao lado dele etc. semelhante ao que se usa em HTML com o <span> por exemplo, mas não é possível alterar a largura e altura

display: inline-block
Esse valor faz com que o elemento se comporte como um inline onde posso acomodar elementos ao lado na mesma linha e tudo mais que o inline tem, mas com um adicional de poder setar altura e largura como o block permite.


0 comentários:

Postar um comentário