CSS Tutorial in Hindi [Part 34] - CSS Display Property

In this video i will talk about Display Property in CSS
The display property specifies the display behavior (the type of rendering box) of an element.
In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.
1. inline: Displays an element as an inline element (like span). Any height and width properties will have no effect
2. block: Displays an element as a block element (like p). It starts on a new line, and takes up the whole width
3.contents: Makes the container disappear, making the child elements children of the element the next level up in the DOM
4.flex: Displays an element as a block-level flex container
5.grid: Displays an element as a block-level grid container
6.inline-block: Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
7.inline-flex: Displays an element as an inline-level flex container
8.inline-grid: Displays an element as an inline-level grid container
9.inline-table: The element is displayed as an inline-level table
10.list-item: Let the element behave like a li element
11.run-in: Displays an element as either block or inline, depending on context
12.table: Let the element behave like a table element
13.table-caption: Let the element behave like a caption element
14.table-column-group: Let the element behave like a colgroup element
15.table-header-group: Let the element behave like a thead element
16.table-footer-group: Let the element behave like a tfoot element
17.table-row-group: Let the element behave like a tbody element
18.table-cell: Let the element behave like a td element
19.table-column: Let the element behave like a col element
20.table-row: Let the element behave like a tr element
21.none: The element is completely removed
22.initial: Sets this property to its default value. Read about initial
23.inherit: Inherits this property from its parent element. Read about inherit

[@GirishG]

This is it! This is something everyone who's learning CSS needs to see. Best explanation. Thanks TechGun!

[@TechGun]

Glad it was helpful!

[@ipshitatripathy120]

I really appreciate you@@TechGun . Is there a way I could reach out to you? I live in the US and need some development support.

[@teethidhar1163]

Hi,, This is Teethi. I really appreciate your work. I am learning CSS through online. I dont have time to go out and take classes for it. Honestly you are the best guider for it. Thank you.

[@TechGun]

Glad it was helpful

[@abhaykumarpandey2906]

Very Nice explanation. Thanks for that. I always get confuse in CSS. Although I am backend developer but while seeing your video that is very self descriptive I got confidence to get do my css work by myself.

[@SunilSharma-ib6wd]

Nobody gives you deep & Useful knowledge like this channel

[@VishalSharma-mw4rs]

Sir you are litterly great...... No comparison.... U r modi jii of teaching

[@vipinsharma-zx9cb]

One of the best tutorials on css

[@tanveerahmed7783]

Sir your way of teaching is superb. Thank you ...............

[@gauravmishra5523]

Amazing explanation and nothing is going bouncer and appreciate your hardwork to explain CSS in a very easy way,so that one can understand it in a easy way, thanks a lot sir.

[@Nikhilllll156]

Excellently explained 🔥🔥🔥🔥... This video should reach million views

[@ROCKY_1507]

its interesting and well explained..thanks man..your new subscriber !!

[@ashishsharma3116]

You are absolutely great. You explain all the concepts with their worst case scenario.

[@TECHWITHKAMALRAJ]

Wow Amazing Explaination, My doubt is 💯 clear regarding display properly Thankyou Sir..

[@jmufaddal4105]

Bhai, your explanation was fantastic. You actually cleared he concepts You are amazing in explaining Thank You God Bless!!!

[@abdullahzeb2887]

Thank You Sir, no body gives that much deep knowledge and clear explanation about this confusing topic

[@anjaliattal2666]

Sir,thank you so much for giving your valuable time for us.your teaching way too good,simple.you are really doing great work .i already completed html in your tutorial.thanks a lot🙏🏻

[@kumarmantosh7262.official]

sir root ka ka ek indeatils example chahiye sir ...apke padhane ke tarika se mai bhaut khush hun

[@mamaigraphics1181]

Awesome ......... Sir, you are best. Thank you so much Sir !

[@imranshaikh115]

just i will say you are awesome :) keep up the good work Thanks a lot

[@baghiedits]

Wow Very Nice Explain with Example Thanks Sir

[@abdulkhaliqbehlim5964]

This is very important while designing navigation banner

[@marrisaikrishna416]

Thank you so much sir.. Best video ever.. And excellent explanation sir

[@Faizan_Iqbal07]

Best teacher 🤩🖤

[@pritamkaibartya23]

One of the best video ever . Thank you so much. I want to know about css display more property.plese.

[@suvodeepnayek5509]

You are best sir❤️

[@marrisaikrishna416]

Best teacher.🙏🙏

[@ultimategamer5781]

Very nice explanation 🙏🏻

[@wasiquekhan4513]

great sir aap ne css ko paani me ghol ke pila diya

[@prateeksarangi9187]

Wow !!Good explanation

[@manishkumar-vy3os]

Great video

[@UAtul]

Super up nice explanation

[@mohammadrifakat7]

good one

[@ভোমরা]

wow

[@bharatkoshti8055]

Waa sir like this

[@sharif7351]

Excellent

[@16_abhikdas52]

Thank you, sir

[@KirtanPatel552]

I have a doubt is when we take display as a inline-block so according to inline-block property box will come beside to box1, but why second box still at new line...

[@learnerboy-kc9fd]

if we can change width and height of element then why we use width and height attribute in ?

[@anshulpant9270]

Sir ye in-line block m ek he line main height or width kyu nahi le raha ye next line main pahunch raha hai ? Explain that please

[@ashok-yadav-]

Thank you sir

[@varshakotwal3407]

🤩🤩🤩🤩🤩

[@saurabhsahu9348]

The content that we display: none; Have disappeared by applying property, how to show the same content in mobile view? Sir please help me🙏

[@adultstatus1821]

Nice

[@ankitsinha007]

why it started with new line in inline-block not clear explanation

[@allanimeworld2898]

Sir please tell me that image tag is inline But we can set width and height How???

[@bbkivinesbigfan3472]

who said this.... image behave as inline-block .

[@allanimeworld2898]

@@bbkivinesbigfan3472 see we can define width and height from css

[@arunsaklani9890]

Sir plz can u tell me where I can get and practise html and CSS project ?

[@programmer_chetan2231]

But sir img tag to inline hai par ham usme height and width Dr sakte hai

[@hiralalbudhathoki8303]

Big fan andu Pandu😱😱

[@rubyxkumari]

Sahi bola bro

[@ravibhojani5286]

Inline block me example me new line se kyu start huva?

[@banadipmudi3186]

Bcz agar same line me hota to fir un dono ka width+extra border malakar 100% se zyada ho jata aur main window space utna nhi hai. Isliye next line. Agar width 46 ya 47% hota to fir margin+total width mila kar 100% hota aur wo same line me ho jata

[@puneetshakya3001]

Sir inline-block mein to to fir same line pe hona chaiye tha show pr div 2 to next line mein chla gya esa q ?

[@banadipmudi3186]

Bcz agar same line me hota to fir un dono ka width+extra border malakar 100% se zyada ho jata aur main window space utna nhi hai. Isliye next line. Agar width 46 ya 47% hota to fir margin+total width mila kar 100% hota aur wo same line me ho jata

[@ghanshyamsaini3826]

please provide course on php...

[@learnwithfahad5473]

sir but jab ap ny inline - block kia to wo new line mai ku chali gai div? jab k inline mai new line se wo start nai hoti?

[@poojagarg5424]

If u got answer..please tell me also

[@tushar090]

Kyuki doo inline-block element m thoda sa gap bydefault hota h jo ki bhot km hota approximate 1px or less aur is case me dono element Ki width 50% thi Jo Ki total 100%width ho gyi aur by default gap bhi hota h doo inline-block element m to isliye Dusra element niche aa gya. agar Kisi ak element ki width 50% sa km hoti to dono element AK line m aata.

[@rubyxkumari]

Advance Css starts ....

[@curiousindian8053]

Bhai kahna kya chahte ho

[@aneeksarker687]

Its Not For You.... Tumhara Palle Main Nehi Padega💙

[@Unknown-Stranger]

ullu itna easy smjhaye isne...fir bhi tere smjh nhi aaya to tere bas ki nhi h coding