a propriedade "display"

display é a propriedade de CSS mais importante para controlar o layout. Qualquer elemento tem um valor de display por defeito, dependendo do tipo de elemento. O valor por defeito para a maioria dos elementos é normalmente block ou inline. Um elemento block é usualmente chamado de block-level. Um elemento inline é sempre e simplesmente chamado inline.

block

<div>

div é um elemento block-level standard. Um elemento block-level começa numa nova linha e alonga-se da esquerda até á direita o mais que conseguir. Outros elementos block-level comuns são p e form, e novos no HTML5 são header, footer, section, e mais.

</div>

inline

span é o elemento inline standard. Um elemento inline consegue envolver algum texto dentro de um parágrafo <span> gostar disto </span> sem quebrar o fluxo do parágrafo. O elemento a é o elemento inline mais comum, uma vez que os utilizas para atalhos.

nenhum

Outro valor comum para display é none. Alguns elementos especializados como o script utilizam isto como valor por defeito. É comum utilizar com JavaScript para esconder e mostrar elementos sem realmente os apagar e re-criar.

Isto é diferente de visibility. Atribuir ao display o valor none não deixará espaço onde o elemento supostamente ficasse, mas visibility: hidden; deixará um espaço vazio.

You found me!

outros valores de display

Existem outros valores mais exóticos para display, como list-item e table. Aqui está uma lista exaustiva. Discutiremos mais tarde inline-block e flex.

crédito extra

Como mencionei, todo o elemento tem um tipo de display por defeito. Contudo, podes sempre anular isto! Apesar de fazer sentido tornar uma div inline, podes utilizar isto para customizar a apresentação de elementos que têm uma semantica particular. Um exemplo comum é tornar elementos li inline para menus horizontais.

  • Creative Commons License