Exemplo
Visor <p> elementos como elementos em linha:
p.inline
{
display: inline;
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade display especifica o tipo de caixa utilizada para um elemento HTML.
| Valor padrão: | inline |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS1 |
| sintaxe JavaScript: | object .style.display="none" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8 Parcial de 5,5 | 3.0 | 3.1 | 7 |
Note: Os valores "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" e "table-row-group" não são suportadas no IE7 e anteriores. IE8 requer um DOCTYPE!. IE9 suporta os valores.
Nota: Os valores "flex" e "inline-flex" requer um prefixo para trabalhar no Safari. Para "flex" usar "display: -webkit-flex" , por "inline-flex" usar "display: -webkit-inline-flex;" .
CSS Syntax
display:value;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| inline | Valor padrão. Exibe um elemento como um elemento inline (like <span>) | Jogue " |
| block | Exibe um elemento como um elemento de bloco (like <p>) | Jogue " |
| flex | Exibe um elemento como um recipiente flexível em nível de bloco. Novo em CSS3 | |
| inline-block | Exibe um elemento como um recipiente em nível de bloco em linha. O interior deste bloco é formatado como a caixa de nível de bloqueio e o elemento em si é formatado como uma caixa de nível de linha | |
| inline-flex | Exibe um elemento como um recipiente flex-inline. Novo em CSS3 | |
| inline-table | O elemento é exibido como uma tabela de nível de linha | |
| list-item | Deixe o elemento de se comportar como um <li> elemento | Jogue " |
| run-in | Exibe um elemento como bloquear ou inline, dependendo do contexto | |
| table | Deixe o elemento de se comportar como um <table> elemento | |
| table-caption | Deixe o elemento de se comportar como um <caption> elemento | |
| table-column-group | Deixe o elemento de se comportar como um <colgroup> elemento | |
| table-header-group | Deixe o elemento de se comportar como um <thead> elemento | |
| table-footer-group | Deixe o elemento de se comportar como um <tfoot> elemento | |
| table-row-group | Deixe o elemento de se comportar como um <tbody> elemento | |
| table-cell | Deixe o elemento de se comportar como um <td> elemento | |
| table-column | Deixe o elemento de se comportar como um <col> elemento | |
| table-row | Deixe o elemento de se comportar como um <tr> elemento | |
| none | O elemento não será exibido em tudo (has no effect on layout) | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo
Uma demonstração de como usar o valor da propriedade herdar:
body {
display: inline;
}
p {
display: inherit;
} Tente você mesmo " Exemplo
Definir a direção de alguns itens flexíveis dentro de um <div> elemento na ordem inversa:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
} Tente você mesmo " Páginas relacionadas
Tutorial CSS: CSS de exibição e visibilidade
Referência HTML DOM: display property