Propiedad display CSS.

PROPIEDAD DISPLAY CSS.

INLINE, BLOCK, NONE,
LIST-ITEM, INLINE-BLOCK.
APRENDERAPROGRAMAR.COM
EJERCICIOS DE EJEMPLO
RESUELTOS EN CÓDIGO
CSS (CU01033D)

Sección: Cursos
Categoría: Tutorial básico del programador web: CSS desde cero

Fecha revisión: 2029

Resumen: Entrega nº33 del Tutorial básico: “CSS desde cero”.

Autor: César Krall

© aprenderaprogramar.com, 2006-2029
Propiedad display
d CSS.

DISPLAY CSS
C
Los elemeentos HTML se dividen ene dos grandes tipos: elementos blocck que tiendeen a ocupar el espacio
disponiblee a todo lo ancho
a y en caaso de existiir varios se sitúan
s unos debajo
d de ottros y elementos inline
que ocupan el espacio necesario dentro de una u línea y en e caso de existir
e varios se sitúan unno junto a
otro en laa misma línea (siempre que
q haya esp pacio). La propiedad disp play nos perrmite alterar el tipo de
caja con que
q se muesttra un elemeento.

Sabemos que por ejem mplo los elemmentos tipo título como h1 son elem mentos blockk, y por tanto o de forma
“natural” tienden a occupar todo el or el contrario elementoss como los links a o las
e ancho de la página. Po
imágeness son elemenntos inline. Veamos cómo o la propiedaad display peermite alteraar estas cualidades.

AD DISPLAY
PROPIEDA
Esta prop
piedad nos permite
p estaablecer el tip
po de caja que
q el naveggador empleeará para vissualizar un
elementoo, siendo los tipos
t más coomunes inline y block, au
unque existen
n bastantes otros.
La sintaxiss a emplear es
e del tipo:

selectorElemento {display: especificcaciónDeVisualización; }

PROP
PIEDAD CSS display
d

Función de la propie
edad Permite definir el tipo de po
osición de caaja para visuaalizar un elem
mento.

Deppende del elemento

e (inline para elementos inline y block para
Valor po
or defecto
mentos tipo block)
elem

Aplicable a Tod
dos los elemeentos.
inlin
ne (el elementto se muestraa en una caja inline)
i

blocck (el elementto se muestra en una caja block).

b

nonne (el elementto no se muestra; el efecto

o es como si no existiera, por lo que
su espacio
e será ocupado por otros elementoos)

Valores posibles parra list--item (el elem

mento se comp
porta como si fuera un elem
mento li)
opiedad
esta pro inlin
ne-block (el elemento
e gene
era una caja block
b pero quue se comportta como si
fuerra inline admiitiendo otros elementos enn la misma lín
nea; el compo
ortamiento
se asemeja
a al de los elementoss img)

Otro
os que llevan a que el elem mento simulee el comportaamiento de ottro (inline-
table, table, table-caption, tab
ble-cell, table-column, tablle-column-gro
oup, table-
footter-group, tab
ble-header-grooup, table-roww, table-row-ggroup)

© aprenderraprogramar.co
om, 2006-2029
Propiedad display
d CSS.

PROP
PIEDAD CSS display
d

Otro
os avanzados (flex, inline-flex, grid, inlinee-grid, run-in))

inhe
erit (se heredaan las caracte
erísticas del elemento padree).

Ejemplos #content1 {displaay: inline;}

aprende
eraprogramaar.com .elementoMonter {display: bloock;}

La propiedad display admite nummerosos valo

ores, pero lo
os más usado
os son inlinee, block e inline-block.
Son estoos tres valo ores los que debemo os aprenderr ahora. El resto loss iremos co onociendo
progresivaamente a medida
m quee nos puedaan resultar necesarios o cuando profundicem mos en el
conocimieento de CSSS. Tener en cuenta tam
mbién que estas
e otras propiedades
p a que nos referimos
pueden no ser reconoocidas por muchos naveggadores.
A continuación verem mos algunos ejemplos
e de uso de las propiedades
p nte especificadas. Para
anteriormen
os a utilizar el
ello vamo e código HTM
ML de base que
q venimos empleando a lo largo deel curso.
Define loss siguientes estilos
e css y visualiza
v el resultado en tu navegado
or:

/* Curso CSS estilos aprenderap programar.com*/

*{ffont-family: arial;}
boody {width:600p px;}
divv {border-style:: solid;}
divv div {border-sttyle: dashed; boorder-color: greeen; margin: 5ppx;}
divv div div {bordeer-style: dashedd; border-color:: red; margin: 5px;}
5
h11 {border-style: dashed; bordeer-color: green;}
h22 {border-style: dashed; bordeer-color: red; }
li {border-style:
{ d
dotted; border-width:thin; borrder-color:browwn; margin: 3pxx;}

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

© aprenderraprogramar.co
om, 2006-2029
Propiedad 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;}

© aprenderaprogramar.com, 2006-2029
Propiedad display CSS.

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

Los elementos de item de menú que son li y que ocupaban cada

li {display: inline;} uno una línea, se ponen en la misma línea. Sólo cuando no caben
en una línea continuan en la siguiente.

Las imágenes que estaban en una sola línea unas junto a otras se
img {display: block;} sitúan cada una en una línea comportándose como elementos
block

El menú (con sus cajas interiores, items de menú, etc.)

#menu1 {display:none;} 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

A diferencia de establecer sólo inline, si un elemento salta de

li {display: inline-block;} 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; } Hace que la lista se comporte como una tabla donde cada item
li {display: table-cell; padding:10px;} 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.

Próxima entrega: CU01034D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

© aprenderaprogramar.com, 2006-2029