Como a propriedade display controla o comportamento e o fluxo dos elementos na página
A propriedade display é uma das mais importantes do CSS. Ela controla como um elemento se comporta no fluxo da página: se ocupa a linha inteira, se fica lado a lado com outros, se some da tela e assim por diante.
Elementos de bloco ocupam toda a largura disponível e sempre começam em uma nova linha. div, p, h1 a h6, section e article são exemplos de elementos que já são block por padrão.
Carregando...Elementos inline ficam na mesma linha que o conteúdo ao redor e ocupam apenas o espaço do seu conteúdo. span, a, strong e em já são inline por padrão.
Elementos inline não aceitam width e height.
Carregando...Une o melhor dos dois mundos: fica na mesma linha que outros elementos, mas aceita width e height.
Carregando...Remove o elemento do fluxo da página. Ele deixa de existir visualmente e não ocupa espaço.
Carregando...É diferente de visibility: hidden, que esconde o elemento mas mantém o espaço que ele ocupava.
display: flex e display: grid são os dois sistemas de layout modernos do CSS. Eles merecem aulas próprias, mas a propriedade de ativação é a mesma display.
Carregando...Qualquer elemento pode ter seu display alterado. Isso é muito útil para ajustar o comportamento de elementos sem mudar o HTML.
Carregando...