PDF de programación - Propiedad display de CSS

Propiedad display de CSS

LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

introducción

• Todos los elementos tienen una forma de comportarse
visualmente
• La forma de comportarse lo controla la propiedad CSS
display
• Esta propiedad se puede modificar

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

display:none

• No se muestra el elemento

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

display:inline

• Elemento cuyo contenido se muestra en la misma línea
• Ejemplos (por defecto):

• strong
• em
• mark
• q
• span

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

display:inline

• Admite márgenes, padding, bordes,…
• No admite propiedades width, height ni de
posicionamiento

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

display:block

• Elemento que genera una caja
• Por defecto se expande en todo el ancho de su contenedor
• Ejemplos (por defecto):

• div
• p
• h1
• section
• article
• ul

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

display:block

• Permite modificar todas las propiedades

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

display:inline-block

• Genera cajas interiores a su contenedor
• El tamaño se adapta al contenido
• Ejemplos (por defecto):

• img
• input
• textarea
• button
• video

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

display:inline-block

• Permite modificar todas las propiedades salvo las de
posicionamiento
• Sí admite utilizar float

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

display:list-item

• Hace que el elemento sea un ítem de lista
• Ejemplos:

• li
• dd

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

otros

• table. Comportamiento de tabla (como <table>)
• table-row. Comportamiento de fila de tabla (como <tr>)
• table-cell. Comportamiento de celda (como <td>)
• table-column. Comportamiento de columna (como <col>)
• table-column-group. Como <colgroup>
• table-header-group- Como thead

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

otros

• table-row-group- Como <tbody>
• table-footer-group. Como <tfoot>
• compact. Dependiendo del contenedor genera una caja
completa o una caja en línea. Lo hereda de su
contenedor
• run-in. Dependiendo del contenedor genera un elemento
block o uno inline.

LMSGI-Unidad 3-5- Propiedad display

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet