Propiedad display CSS. inline, block, none, list-item. Ejercicios ejemplos resueltos en código CSS (CU01033D)

Resumen: Entrega nº33 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01033D

 

 

DISPLAY CSS

Los elementos HTML se dividen en dos grandes tipos: elementos block que tienden a ocupar el espacio disponible a todo lo ancho y en caso de existir varios se sitúan unos debajo de otros y elementos inline que ocupan el espacio necesario dentro de una línea y en caso de existir varios se sitúan uno junto a otro en la misma línea (siempre que haya espacio). La propiedad display nos permite alterar el tipo de caja con que se muestra un elemento.

css

 

Sabemos que por ejemplo los elementos tipo título como h1 son elementos block, y por tanto de forma “natural” tienden a ocupar todo el ancho de la página. Por el contrario elementos como los links a o las imágenes son elementos inline. Veamos cómo la propiedad display permite alterar estas cualidades.

 

 

PROPIEDAD DISPLAY

Esta propiedad nos permite establecer el tipo de caja que el navegador empleará para visualizar un elemento, siendo los tipos más comunes inline y block, aunque existen bastantes otros.

La sintaxis a emplear es del tipo:

selectorElemento {display: especificaciónDeVisualización; }

 

PROPIEDAD CSS display
Función de la propiedad Permite definir el tipo de posición de caja para visualizar un elemento.
Valor por defecto Depende del elemento (inline para elementos inline y block para elementos tipo block)
Aplicable a Todos los elementos.
Valores posibles para esta propiedad inline (el elemento se muestra en una caja inline)
block (el elemento se muestra en una caja block).
none (el elemento no se muestra; el efecto es como si no existiera, por lo que su espacio será ocupado por otros elementos)
list-item (el elemento se comporta como si fuera un elemento li)
inline-block (el elemento genera una caja block pero que se comporta como si fuera inline admitiendo otros elementos en la misma línea; el comportamiento se asemeja al de los elementos img)
Otros que llevan a que el elemento simule el comportamiento de otro (inline-table, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group)
Otros avanzados (flex, inline-flex, grid, inline-grid, run-in)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com #content1 {display: inline;}
.elementoMonter {display: block;}

 

 

La propiedad display admite numerosos valores, pero los más usados son inline, block e inline-block. Son estos tres valores los que debemos aprender ahora. El resto los iremos conociendo progresivamente a medida que nos puedan resultar necesarios o cuando profundicemos en el conocimiento de CSS. Tener en cuenta también que estas otras propiedades a que nos referimos pueden no ser reconocidas por muchos navegadores.

A continuación veremos algunos ejemplos de uso de las propiedades anteriormente especificadas. Para ello vamos a utilizar el código HTML de base que venimos empleando a lo largo del curso.

Define los siguientes estilos css y visualiza el resultado en tu navegador:

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
body {width:600px;}
div {border-style: solid;}
div div {border-style: dashed; border-color: green; margin: 5px;}
div div div {border-style: dashed; border-color: red; margin: 5px;}
h1 {border-style: dashed; border-color: green;}
h2 {border-style: dashed; border-color: red; }
li {border-style: dotted; border-width:thin; border-color:brown; margin: 3px;}

 

 

Con esto lo único que hemos hecho es poner bordes y márgenes para visualizar las cajas que conforman la página web. El resultado será similar a este:

display css

 

Vemos un div en color verde correspondiente al menú (dentro del cual hay otro div en color rojo con el texto “Menú”, una línea generada por el <hr/> y una lista ul con los items de menú).

Accede al código HTML y establece como id de dicho div “menu1”.

 

 

EJERCICIO RESUELTO

Sin ejecutar código, indica cuáles deberían ser los resultados obtenidos al añadir las líneas que se indican en la tabla al archivo CSS. Completa la tabla primero sin ejecutar el código. Luego, compara tu solución con la expuesta en la solución.

Fragmento de código añadido Resultado
li {display: inline;}  
img {display: block;}  
#menu1 {display:none;}  
h2 {margin-left:30px; display:list-item;}  
li {display: inline-block;}  
ul {display: table; } li {display: table-cell; padding:10px;}                                                                                                         

 

 

SOLUCIÓN

Prueba a visualizar los resultados en tu navegador al añadir estos fragmentos de código y comprueba que obtienes los mismos resultados que se indican a continuación:

Fragmento de código añadido Resultado
li {display: inline;} Los elementos de item de menú que son li y que ocupaban cada uno una línea, se ponen en la misma línea. Sólo cuando no caben en una línea continuan en la siguiente.
img {display: block;} Las imágenes que estaban en una sola línea unas junto a otras se sitúan cada una en una línea comportándose como elementos block
#menu1 {display:none;} El menú (con sus cajas interiores, items de menú, etc.) desaparece completamente y su espacio es ocupado por el texto “Aprender a programar es…”
h2 {margin-left:30px; display:list-item;} El título h2 aparece con una viñeta como si fuera un elemento li de una lista
li {display: inline-block;} A diferencia de establecer sólo inline, si un elemento salta de línea lo hace completamente por ser un bloque. Su texto no puede cortarse entre líneas como ocurriría si fuera inline.
ul {display: table; } li {display: table-cell; padding:10px;} Hace que la lista se comporte como una tabla donde cada item es una celda.

 

 

Hay una curiosidad. En la imagen donde vimos las cajas podemos observar que el elemento h2 tiene un espacio libre por arriba y por debajo, que corresponde a un margin-top y margin-bottom automático que aplica el navegador por defecto para este tipo de elementos. Si escribimos h2 {display: inline;} comprobamos no sólo que la caja deja de ocupar todo el ancho disponible sino que los márgenes desparecen ¿Por qué? Porque en los elementos inline no son aplicables (o se ignoran si están establecidas) ciertas propiedades como width, height, margin y float. De este modo, al cambiar el formato de caja no sólo estamos afectando a que los elementos ocupen una línea a todo lo ancho o no, sino también otras propiedades que pueden quedar desactivadas cuando se cambia el tipo de caja usando la propiedad display. Tener en cuenta también que los elementos inline sólo pueden contener otros elementos inline o texto en su interior.

Otra curiosidad. Posiblemente no obtengas nada coherente, pero comprueba qué ocurre si como css utilizas esta única declaración *{font-family: arial; display: inline-block;}

Si te surgen dudas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación