Ejemplo
Pantalla <p> elementos como elementos en línea:
p.inline
{
display: inline;
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad de visualización especifica el tipo de caja usada para un elemento HTML.
| Valor por defecto: | inline |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS1 |
| la sintaxis de JavaScript: | object .style.display="none" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 Parciales de 5,5 | 3.0 | 3.1 | 7.0 |
Note: Los valores de "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" y "table-row-group" no son compatibles con Internet Explorer 7 y versiones anteriores. IE8 requiere un DOCTYPE!. IE9 es compatible con los valores.
Nota: Los valores de "flex" y "inline-flex" requiere un prefijo para trabajar en Safari. Por "flex" utilizar "display: -webkit-flex" , por "inline-flex" uso "display: -webkit-inline-flex;" .
sintaxis CSS
display:value;Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| inline | Valor por defecto. Muestra un elemento como un elemento en línea (like <span>) | Juegalo " |
| block | Muestra un elemento como un elemento de bloque (like <p>) | Juegalo " |
| flex | Muestra un elemento como un contenedor de flexión a nivel de bloque. Nuevo en CSS3 | |
| inline-block | Muestra un elemento como un contenedor de bloques a nivel de línea. El interior de este bloque tiene el formato de caja a nivel de bloque, y el elemento en sí tiene el formato de una caja a nivel de línea | |
| inline-flex | Muestra un elemento como un contenedor de flexión a nivel de línea. Nuevo en CSS3 | |
| inline-table | El elemento se muestra como una tabla a nivel de línea | |
| list-item | Deje que el elemento se comporte como un <li> elemento | Juegalo " |
| run-in | Muestra un elemento, ya sea como bloque o en línea, dependiendo del contexto | |
| table | Deje que el elemento se comporte como un <table> elemento | |
| table-caption | Deje que el elemento se comporte como un <caption> elemento | |
| table-column-group | Deje que el elemento se comporte como un <colgroup> elemento | |
| table-header-group | Deje que el elemento se comporte como un <thead> elemento | |
| table-footer-group | Deje que el elemento se comporte como un <tfoot> elemento | |
| table-row-group | Deje que el elemento se comporte como un <tbody> elemento | |
| table-cell | Deje que el elemento se comporte como un <td> elemento | |
| table-column | Deje que el elemento se comporte como un <col> elemento | |
| table-row | Deje que el elemento se comporte como un <tr> elemento | |
| none | El elemento no se mostrará en absoluto (has no effect on layout) | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Una demostración de cómo utilizar el valor de la propiedad hereda:
body {
display: inline;
}
p {
display: inherit;
} Inténtalo tú mismo " Ejemplo
Establecer la dirección de algunos elementos flexibles dentro de un <div> elemento en el orden inverso:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
} Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: CSS la exposición y exhibición
Referencia HTML DOM: display property