Meta tags:
description=La propiedad CSS display define el tipo de visualización de un elemento. Lee sobre todos los valores y prueba ejemplos.;

Headings (most frequently used words):

display, propiedad, la, de, ejemplo, con, el, valor, css, valores, block, por, qué, importa, tipos, caja, en, sintaxis, propiedades, relacionadas, práctica, resultado, los, inline, contents, flex, none, frente, visibility, hidden,

Text of the page (most frequently used words):
#display (56), inline (54), css (40), border (40), html (37), grid (33), table (30), text (30), flex (28), style (28), block (26), width (26), caja (25), elemento (24), como (24), color (24), the (24), #propiedad (21), una (21), los (20), font (20), valor (19), div (19), background (18), column (17), por (16), list (16), aprender (15), nivel (15), height (15), title (15), bloque (14), con (14), comporta (14), span (13), que (12), del (12), item (12), línea (12), padding (12), valores (11), body (11), ejemplo (11), right (11), contenedor (10), head (10), type (10), break (10), para (9), elementos (9), position (9), row (9), contents (9), class (9), top (9), left (9), bottom (9), image (9), animation (9), group (8), hijos (8), property (8), margin (8), stroke (8), sus (7), hello (7), align (7), defecto (7), overflow (7), decoration (7), offset (7), this (6), page (6), none (6), visibility (6), pero (6), genera (6), texto (6), mismo (6), copiar (6), solid (6), variant (6), w3docs (5), práctica (5), sintaxis (5), cómo (5), las (5), diseño (5), initial (5), tabla (5), pruébalo (5), 1c87c9 (5), here (5), example (5), document (5), doctype (5), only (5), and (5), cada (5), value (5), transition (5), line (5), last (5), outline (5), radius (5), child (5), formatter (5), todos (4), generator (4), propiedades (4), direction (4), hidden (4), son (4), cajas (4), predeterminado (4), caption (4), nueva (4), used (4), justify (4), content (4), has (4), not (4), typesetting (4), lorem (4), ipsum (4), dummy (4), industry (4), with (4), mode (4), transform (4), fill (4), size (4), template (4), gap (4), rule (4), nth (4), first (4), json (3), code (3), encoder (3), editor (3), cuestionarios (3), ejercicios (3), php (3), javascript (3), ejemplos (3), qué (3), empty (3), run (3), guía (3), flexbox (3), completo (3), ocupa (3), espacio (3), usa (3), padre (3), ninguna (3), cell (3), vertical (3), ancho (3), dentro (3), uno (3), object (3), dos (3), distribuye (3), flow (3), visualización (3), consulta (3), tipo (3), estilos (3), tienen (3), word (3), wrap (3), spacing (3), range (3), origin (3), items (3), before (3), after (3), max (3), letter (3), columns (3), auto (3), clip (3), box (3), ver (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), herramientas (2), python (2), java (2), git (2), libros (2), tutoriales (2), fragmentos (2), relacionadas (2), tipos (2), importa (2), cells (2), cuáles (2), estos (2), válidos (2), predeterminados (2), otras (2), controlar (2), float (2), ocultar (2), sin (2), flujo (2), definitiva (2), elimina (2), eliminado (2), sigue (2), frente (2), inherit (2), establece (2), contexto (2), navegadores (2), footer (2), header (2), fueran (2), respeta (2), representa (2), comienza (2), disponible (2), fluye (2), ignora (2), 8ebf42 (2), 666 (2), center (2), 300 (2), propia (2), directos (2), survived (2), five (2), centuries (2), but (2), also (2), leap (2), into (2), electronic (2), remaining (2), essentially (2), unchanged (2), printing (2), been (2), standard (2), ever (2), since (2), 1500s (2), when (2), unknown (2), printer (2), took (2), galley (2), scrambled (2), make (2), specimen (2), book (2), cambio (2), another (2), some (2), cuando (2), aplica (2), lista (2), comienzan (2), otro (2), inicial (2), moderno (2), controla (2), convierte (2), externa (2), interna (2), sitúa (2), junto (2), márgenes (2), este (2), ignoran (2), dimensionar (2), tiene (2), especificación (2), hoja (2), navegador (2), usuario (2), clave (2), sobre (2), puede (2), más (2), define (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), blend (2), min (2), rows (2), start (2), end (2), feature (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, derechos, reservados, hecho, desarrolladores, idioma, política, privacidad, contacto, acerca, empresa, try, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, comprobar, sobreescribe, formas, colocan, eliminarlos, construir, diseños, bidimensionales, todo, desbloquea, punto, confusión, frecuente, documento, hubiera, sido, oculta, reservando, habría, ocupado, contraer, preservando, hueco, mantiene, hereda, renderiza, dependiendo, obsoleto, mayoría, evitar, añade, marcador, col, tbody, tfoot, thead, colgroup, renderizan, espaciado, descripción, c3c3c3, 100, borde, fondo, serían, ignorados, comportan, ccc, 200, eee, primer, par, permanece, sola, porque, ocupan, completa, respetan, alto, 30px, 300px, see, that, does, accept, sitúan, lado, separados, únicamente, hayas, definido, resultado, its, dom, css1, versión, animable, heredada, describe, partes, participa, propios, eso, tiempo, interno, externo, hacen, comporten, correspondientes, dimensiones, filas, columnas, largo, único, eje, extienden, llenar, pueden, contener, section, contenido, verticales, debes, usar, quieres, dimensionado, saltar, fluyen, fuerzan, salto, acepta, margen, separa, líneas, vecinas, manteniéndola, img, existen, varios, formatos, principales, especificaciones, anteriores, tenían, efecto, nota, apareciendo, muchos, simple, mantenerlo, antiguo, integrados, realmente, xml, proviene, palabra, aparece, notas, adicionales, proporciona, agente, así, sucesivamente, puedes, ese, fluir, configurando, enlaces, convertirse, barra, navegación, horizontal, sobreescribir, capítulo, explica, hace, diferencia, entre, respecto, hermanos, distribuyen, errores, comunes, ejecutables, importantes, forma, desaparece, renderizado, lee, prueba, zoom, index, writing, will, change, widows, white, space, user, select, bidi, underline, orientation, indent, ink, combine, upright, layout, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, shrink, grow, basis, filter, cursor, reset, increment, clear, charset, caret, side, sizing, source, slice, outset, collapse, bleed, attachment, backface, appearance, play, state, name, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, default, checked, active, selectores, selectors, css3, guides, gradientes, nombres, colores, tablas, links, uso, introducción, basic, iniciar, sesión, buscar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
f animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propiedad css display la propiedad css display define el tipo de visualización de un elemento lee sobre todos los valores y prueba ejemplos la propiedad display es una de las propiedades css más importantes para controlar el diseño define el tipo de caja de renderizado que genera un elemento html si se sitúa en su propia línea fluye de forma inline junto al texto se convierte en un contenedor flex o grid o desaparece por completo este capítulo explica qué hace cada valor de display la diferencia entre la visualización externa cómo se comporta la caja respecto a sus hermanos y la interna cómo se distribuyen sus hijos los errores más comunes y ejemplos ejecutables para cada valor clave por qué importa la propiedad display cada elemento comienza con un valor display predeterminado que proporciona la hoja de estilos del agente de usuario del navegador div y p tienen por defecto block span y a tienen por defecto inline li tiene por defecto list item y así sucesivamente con display puedes sobreescribir ese valor predeterminado por ejemplo un elemento de nivel bloque puede fluir inline configurando display inline y una lista de enlaces puede convertirse en una barra de navegación horizontal dos notas adicionales sobre los valores predeterminados en html el display inicial de un elemento proviene de la especificación html o de la hoja de estilos del navegador usuario no del valor predeterminado de la palabra clave display inline que aparece en la especificación css en xml que no tiene estilos integrados todos los elementos realmente tienen por defecto inline css antiguo frente a moderno en especificaciones anteriores width y height no tenían efecto en los elementos inline la nota sigue apareciendo en muchos tutoriales pero en la práctica los navegadores ignoran width height en una caja inline simple para dimensionar un elemento y mantenerlo en la línea usa inline block tipos de caja en css existen varios formatos principales de caja en css inline las cajas de nivel inline fluyen dentro de una línea de texto y no fuerzan un salto de línea span em y img son inline por defecto una caja inline acepta padding y márgenes pero el padding margen vertical no separa las líneas vecinas y width height se ignoran para dimensionar la caja manteniéndola en la línea usa inline block consulta elementos de bloque e inline inline block se comporta como una caja inline se sitúa en la línea junto al texto y otro contenido inline pero sí respeta width height y los márgenes padding verticales este es el valor que debes usar cuando quieres un dimensionado de tipo caja sin saltar a una nueva línea block las cajas de nivel bloque comienzan en una nueva línea y por defecto se extienden para llenar el ancho disponible de su contenedor pueden contener otras cajas de nivel bloque p ul h1 h6 div section y ol son de nivel bloque por defecto flex display flex genera un contenedor flex de nivel bloque y distribuye sus hijos directos a lo largo de un único eje consulta la guía definitiva de flexbox grid display grid genera un contenedor grid de nivel bloque y distribuye sus hijos en dos dimensiones filas y columnas consulta la propiedad grid valores de tabla valores como table table row y table cell hacen que los elementos no tabla se comporten como los elementos de tabla html correspondientes inline table se comporta como un table pero como una caja inline dentro de la caja de tabla se establece un contexto de nivel bloque visualización externa vs interna el css moderno describe display como dos partes el valor externo block o inline controla cómo participa la caja en el diseño de su padre el valor interno flow flex grid table controla cómo la caja distribuye sus propios hijos por eso flex convierte un elemento en una caja de nivel bloque y en un contenedor flex al mismo tiempo valor inicial inline se aplica a todos los elementos heredada no animable no versión css1 sintaxis dom object style display list item sintaxis sintaxis de la propiedad css display display inline block contents flex grid inline block inline flex inline grid inline table list item run in table table caption table column group table header group table footer group table row group table cell table column table row none initial inherit copiar ejemplo de la propiedad display ejemplo de la propiedad css display con el valor inline doctype html html head title title of the document title style display li display inline margin right 10 px style head body h2 display property example h2 p here the list item is with its initial value p ul li list item li li list item li ul p here the list item is used with the display property the inline value is used p ul class display li list item 1 li li list item 2 li ul body html copiar pruébalo tú mismo resultado cuando se aplica display inline a los elementos de lista ya no comienzan cada uno en una nueva línea en cambio se sitúan uno al lado del otro separados únicamente por el margin right que hayas definido ejemplo de la propiedad display con los valores inline y block ejemplo de la propiedad css display con los valores inline y block doctype html html head title title of the document title style inline border 1 px solid 1c87c9 display inline block border 1 px solid 1c87c9 display block height 30 px width 300 px style head body h2 display property example h2 p here the list item is with initial value we see that the inline value does not accept height and width p span this is some text span span class inline this is another text span hr p here the list item is used with the block value of the display property p span class block this is some text span span class block this is another text span body html copiar pruébalo tú mismo el primer par de span s permanece en una sola línea porque inline ignora width y height los span con block en cambio ocupan cada uno una línea completa y respetan el ancho de 300px y el alto de 30px ejemplo de la propiedad display con el valor block ejemplo de la propiedad css display con el valor block doctype html html head title the title of the document title style block display block border 1 px solid 666 background color eee padding 10 px width 200 px hello border 1 px solid 1c87c9 background color 8ebf42 padding 10 px style head body h2 display property example h2 div class block lorem ipsum is dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div class hello hello div it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div body html copiar pruébalo tú mismo ejemplo de la propiedad display con el valor contents ejemplo de la propiedad css display con el valor contents doctype html html head title title of the document title style contents display contents hello border 1 px solid 1c87c9 background color ccc padding 10 px text align center style head body h2 display property example h2 div class contents lorem ipsum is dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div class hello hello div it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div body html copiar pruébalo tú mismo con display contents el contenedor contents no genera ninguna caja propia su borde y fondo serían ignorados y sus hijos el texto y la caja hello se comportan como si fueran hijos directos de body ejemplo de la propiedad display con el valor flex ejemplo de la propiedad css display con el valor flex doctype html html head title title of the document title style flex width 300 px height 100 px border 1 px solid c3c3c3 display flex justify content center div width 70 px height 70 px style head body h2 display property example h2 p here the display flex is used p div id flex div style background color 1c87c9 1 div div style background color 666 2 div div style background color 8ebf42 3 div div body html copiar pruébalo tú mismo valores valor descripción inline representa el elemento como una caja inline fluye dentro del texto ignora width height block representa el elemento como una caja de bloque comienza en una nueva línea ocupa el ancho disponible inline block una caja de nivel inline que sí respeta width height y el espaciado vertical flex contenedor flex de nivel bloque inline flex contenedor flex de nivel inline grid contenedor grid de nivel bloque inline grid contenedor grid de nivel inline contents el elemento no genera ninguna caja sus hijos se renderizan como si fueran hijos de su padre inline table una tabla de nivel inline se comporta como un table pero como una caja inline table se comporta como un elemento html table table caption se comporta como un elemento html caption table column group se comporta como un elemento html colgroup table header group se comporta como un elemento html thead table footer group se comporta como un elemento html tfoot table row group se comporta como un elemento html tbody table row se comporta como un elemento html tr table cell se comporta como un elemento html td table column se comporta como un elemento html col list item se comporta como un elemento html li añade una caja de marcador run in se renderiza como bloque o inline dependiendo del contexto obsoleto eliminado de la mayoría de los navegadores evitar none elimina el elemento del diseño por completo no genera ninguna caja y no ocupa espacio initial establece la propiedad en su valor predeterminado inline inherit hereda el valor del elemento padre display none frente a visibility hidden un punto de confusión frecuente display none elimina el elemento del flujo del documento por completo no ocupa espacio como si hubiera sido eliminado visibility hidden oculta el elemento pero mantiene su caja por lo que sigue reservando el espacio que habría ocupado usa display none para contraer el diseño y visibility hidden para ocultar preservando el hueco en el diseño propiedades relacionadas la guía definitiva de flexbox todo lo que desbloquea display flex grid construir diseños bidimensionales con display grid visibility ocultar elementos sin eliminarlos del flujo position y float otras formas de controlar cómo se colocan las cajas elementos de bloque e inline los valores predeterminados html que sobreescribe display práctica práctica cuáles de estos son valores válidos de la propiedad css display cuáles de estos son valores válidos de la propiedad css display block inline inline block flex grid table hidden none run in comprobar was this page helpful yes no previous direction next empty cells on this page por qué importa la propiedad display tipos de caja en css sintaxis valores propiedades relacionadas práctica w3docs tutoriales ejemplos ejercicios fragmentos y cuestionarios gratuitos para la web desde 2014 libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python práctica ejercicios cuestionarios editor try it herramientas html editor password generator html encoder code diff json beautifier empresa acerca de contacto política de privacidad...