Propiedad de visualización CSS
Ejemplo
Uso de algunos valores de visualización diferentes:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La display
propiedad especifica el comportamiento de visualización (el tipo de cuadro de representación) de un elemento.
En HTML, el valor de la propiedad de visualización predeterminada se toma de las especificaciones de HTML o de la hoja de estilo predeterminada del navegador/usuario. El valor predeterminado en XML está en línea, incluidos los elementos SVG.
Valor por defecto: | ? |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS1 |
Sintaxis de JavaScript: | objeto .style.display="ninguno" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
Nota: Los valores "flex" e "inline-flex" requieren el prefijo -webkit- para funcionar en Safari.
Nota: "mostrar: contenido" no funciona en la versión anterior de Edge 79.
Sintaxis CSS
display: value;
Valores de propiedad
Value | Description | Play it |
---|---|---|
inline | Displays an element as an inline element (like <span>). Any height and width properties will have no effect | |
block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width | |
contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | |
flex | Displays an element as a block-level flex container | |
grid | Displays an element as a block-level grid container | |
inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values | |
inline-flex | Displays an element as an inline-level flex container | |
inline-grid | Displays an element as an inline-level grid container | |
inline-table | The element is displayed as an inline-level table | |
list-item | Let the element behave like a <li> element | |
run-in | Displays an element as either block or inline, depending on context | |
table | Let the element behave like a <table> element | |
table-caption | Let the element behave like a <caption> element | |
table-column-group | Let the element behave like a <colgroup> element | |
table-header-group | Let the element behave like a <thead> element | |
table-footer-group | Let the element behave like a <tfoot> element | |
table-row-group | Let the element behave like a <tbody> element | |
table-cell | Let the element behave like a <td> element | |
table-column | Let the element behave like a <col> element | |
table-row | Let the element behave like a <tr> element | |
none | The element is completely removed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Una demostración de cómo usar el valor de la propiedad de contenido. En el siguiente ejemplo, el contenedor .a desaparecerá y los elementos secundarios (.b) se convertirán en elementos secundarios del elemento en el siguiente nivel en el DOM:
.a {
display: contents;
border:
2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
Ejemplo
Una demostración de cómo usar el valor de la propiedad de herencia:
body {
display: inline;
}
p {
display: inherit;
}
Ejemplo
Establezca la dirección de algunos elementos flexibles dentro de un elemento <div> en orden inverso:
div {
display: flex;
flex-direction: row-reverse;
}
páginas relacionadas
Tutorial de CSS: Visualización y visibilidad de CSS
Referencia HTML DOM: propiedad de visualización