Scribd
Upload
85 views8 pages

CSS Display Properties 1686911418

Uploaded by

Ana Machado
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
85 views8 pages

CSS Display Properties 1686911418

Uploaded by

Ana Machado
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 8
JOIN US & LEARN WEB DEVELOPMENT display: inline; display: inline-block; display: block; Learn all in one place display: flex; display: grid; display: none; display: table; @developers_community_._ xX @happy.frontend JOIN US & LEARN BR SAVE THIS POST WEB DEVELOPMENT Inline Element Displays an elemer nent. Any height an noe eee } display: inline; inline inline inline Inline-block Element Displays an element as an inline-level block container. You can set height and width .inline-block-element { Che ye l esha) int inline- inline- display: inline-block; block inline- Block block Block Element The element will w line and occupy the full width avallable. And you can set wid and height values display: block; ee peck Pec ern block ree @developers_community_._ X @happy.frontend JOIN US & LEARN BR SAVE THIS POST WEB DEVELOPMENT MAIN DIFFERENCE TO REMEMBER at are Maa | tart on a ne ine and only mime) the width or height FTO Pees ent ou can MCL aReht Maia rola) Cem Tm UCIMCLT MCT mC a7 Nas NTE aon BLOCK ELEME! eel SE
Pe le Pete oli ee @developers_community_._ xX @happy.frontend JOIN US & LEARN BA SAVE THIS POST WEB DEVELOPMENT display: none; display: none doesn't take space when the element is rendered. The other ways still take the space normally. There are three common CSS properties to make an element invisible :- display: none; * opacity: 0; * visibility: hidden; @) Difference b/w above three @developers_community._ XX | @happy.frontend JOIN US & LEARN PA SAVE THIS POST WEB DEVELOPMENT DIFFERENCE B/W OPACITY: 0; VISIBILITY: HIDDEN; DISPLAY: NONE; = z | Property pean ae een | opacity: @ a ee | visibility: hidden collapse events taborder opacity: @ No Yes Yes visibility: hidden No No No visibility: collapse ‘ No No display: none Yes No No * Yes inside a table element, otherwise No. @developers_community_._ xX @happy.frontend JOIN US & LEARN BR SAVE THIS POST WEB DEVELOPMENT display: table/table-cell; If you just want a grid layout that behaves a bit like a table, use
tags with display: table-cell; instead. container { Seah display: table; pa ed } eC Uh .row rf display: table-row; NC oeS i: PTI «column { RISE. display: table-cell; Ip Column1 Column2 Column3 Column1 Column2 Column3 This is basically the equivalent of using the , &
tags. @developers_community_._ xX @happy.frontend JOIN US & LEARN BR SAVE THIS POST WEB DEVELOPMENT display: flex; The display property is also used for new fangled layout methods like Flexbox. After using display: flex; we get access to many flexbox properties :- @ FLEX-DIRECTION @ ORDER @ FLEX-WRAP @ =FLEX-GROW @ FLEX-FLOW @ = FLEX-SHRINK @ JUSTIFY-CONTENT @ FLEX-BASIS @ ALIGN-ITEMS @ ALIGN-SELF @developers_community_._ xX @happy.frontend JOIN US & LEARN BR SAVE THIS POST WEB DEVELOPMENT display: grid; CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. ¢ grid-template-columns —« grid-column-end ° grid-template-rows « grid-row ° grid-template-areas « prid-column ¢ grid-template ¥ * grid-area * grid-auto-columns * row-gap « grid-auto-rows * column-gap ¢ grid-auto-flow * grid * gap © grid-row-start . masonry-auto-flow e grid-column-start . align-tracks & ¢ grid-row-end . justify-tracks & @developers_community._ XX | @happy.frontend

You might also like