CSS Display Property Tutorial

Join my 2024 Bootcamp course experience learnwebcode.t...
In this video we learn about the CSS property "display." We take a look at the most common values and their typical uses in web pages.
Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at learnwebcode.com/
Follow LearnWebCode on Twitter for resources and updates:
/ learnwebcode

[@alexcalder4372]

You just cleared up in less than 10 minutes what has caused me trouble for literally years. Thank you! Great presentation.

[@LearnWebCode]

Alex Calder CSS display can be tricky - it's great to hear the video was helpful, thanks!

[@octopusfetish6658]

This guy is a legend. I didnt have audio and understod everything. Thank you.

[@TheElkster]

Really love your style of teaching. You are clear, keeping explanations simple and your pace enables me to grasp what it is you're explaining! I'm hooked!
Thanks!

[@smb10011001]

Thank you! This explains SO MUCH! By jumping in an teaching myself, I neglected to grok these important fundamentals of HTML/CSS programming. My wall has many head dents from frustration that you have cleared up. Thank you thank you!

[@SamLyn]

Your videos are simple, no frills, and informative. Thank you a bunch. I sort of mixed up the position, display, and float values but with the help of your video I'm starting to sort out how they're different and how they work together.

[@YoussefZidan]

wow!
i totally understand now the differences!
your way of teaching is amazing!
thanks!

[@motodox]

Thanks for all these tutorials, it has really helped me take my website to another level!

[@SteveManning-qs1sn]

This is the best explanation I have seen. Great job!

[@Iskandar_Igit]

i like how the way you teach, its very very clear, i am learning a lot from your channel and videos! keep it up!

[@cosmic_jon]

Awesome! I had an image inside an anchor tag, and there was always a space below it, and I couldn't figure out why. It's because images are inline by default! Switching the image to display: block fixed my issue. Apparently the space below the image was the space for the "descender" like you have in certain letters (j, y, g, q) that goes below the text "baseline". This space is also used for underlines and things of that nature. Thanks for the explanation!

[@matthewspencer6669]

I will be subscribing for sure. You get right to the point and told me exactly what I needed plus some additional information. You also get bonus points for not being 12 years old. I turn a video off the second I hear a high pitched voice with a cs:go wallpaper.

[@tanvirhasanmonir1627]

Very good explanation, now I got understand this. Lot of thanks

[@amirulidzham3686]

Another great video. Thanks. You're totally ready for the video presentation. Well done

[@avieus]

Excellent..finally someone who can spell it in such simple terms... khan Academy:call this dude!

[@benheinzmohele517]

wow you guy know what you are doing..! and I am totally going to subscribe without even being told to..! hit it in less than 10 min..!! are a teacher or what..? daaamn

[@gnomefan]

nice vidoes dude. learn alot from you keep posting the good work and codes :)

[@RedEyedJedi]

Thank you, thank you, thank you! That has completely cleared that up for me.

[@drallisimo34]

great tutorial for understanding the very important display-property in css

[@Knowideer]

great tutorial. very clear and concise! thanks

[@ArunKharel]

best video about display

[@gabrielbaroi1986]

Nicely and greatly explained. Thank you.

[@shovonjamali7854]

Nice and clear! But I have a question though - If img is an inline element then how can we set it's width and height ?!

[@RinnaOfficialChannel]

thank you so much! clarified my inline/block notions. Bless u.

[@coderavec2mdschool2024]

so comprehensible thanks

[@michaeloliver6745]

another great video explanation

[@gopimedia3359]

great. I don't want to you ask, where did you learn coding. I just want to ask , where did you learn how to teach...

[@Dazolers]

Thank you for the explanation!

[@ebrahimhamedi3953]

Suppose you write a new paragraph with id="p2" in a parent paragraph.then if we write #p2{display:inline} we can see that the child paragraph won't act like the tag .
For example
piggy something in the middle
Result:
Piggy
Something in the middle
I expected a result like this:
Piggy something in the middle.

[@spongewirbb]

can you please make a video on how to make items slider for ecommerce site? thanks in advance!

[@natethetoe386]

Do you teach? What school do you work at? I'm on my way.

[@rupeshvaingankar5422]

thanks .. now d concept r clear :)

[@maidul13]

really nice videos :)

[@huihao8058]

Thank you so much!!! You helped me!

[@HarishChandraDubeydsp]

can I have which editor u are using and what is operating system

[@parimalchandwaskar1700]

do you have code repos for the above tutorials??

[@kyawzin-kz]

May I know which IDE or Editor you are using?

[@MrRossss1]

Awesome vid thanks!

[@ttthayai]

Thank you for clearing my doubt!!!

[@AnujSharma-cl6tr]

Thank You So much!!!

[@zshankhan1862]

Which software you are coding on?

[@almashossen4929]

good work bro thanks@ u r great

[@VictoriaJasi]

Thank you. Very usefull.

[@sajidulislam9098]

really helpfull.thanks!

[@corelur]

You are great!!!!

[@Abh19021]

Now how can we make 3 blocks in a line? Do we need to first put 3 divs inside the main div and give inline-block to the main div or give inline-blocks to the 3 divs inside the main div?

[@JohnPaulEnsign]

You can apply inline-block to each of the divs that you want next to eachother. Adding to the main div will make it be inline to it's parent, so probably not what you want.

[@Abh19021]

Makes sense. Thanks.

[@annasfbi]

thank you very informative

[@ronnierios456]

Well explained (y)

[@kacyraye]

Why was the vertical height ignored, but the vertical padding was not ?

[@Sylinic]

I demand moar, MOARRRR.

[@Abderrahmane91]

Thank you very very very much

[@Aminulbd1]

thanks a lot sir.

[@vlae404]

thank you very much!

[@hichamidou8811]

great video big up

[@Grims330]

Спасибо)

[@AskSumon]

thanks man !

[@uumoss]

thank you

[@teamdxgaming]

nice video

[@michaeltaylorjr9962]

Bruh,, this video is the sh#t 👍🏾 ...
because the display property explain really vaguely by a lot of people.

[@warunadevaka406]

nice

[@quentinmckay8658]

heighth is not a word...but thanks for the video :-)

[@viktorstrate]

The blue box is bigger!

[@wolfteamUpdates]

sublime text in MAC O.S.

[@zeuss360]

You are on something ? What ever you are on must be good

[@alexandercasas577]

10 minutes for explain 4 propierties...
i lose ten minutes

[@indiana8576]

very very long. bad practice