Block, Inline, and Inline-Block explained | CSS Tutorial

Understaning how block, inline, and inline-block each behave is very important when learning CSS, as well as knowing why you might want to switch the display property of an element every now and then.
Using outlines to debug CSS: • Trouble shooting trick...
Two-value syntax for the display property: developer.mozilla.org/en-US/d...
#CSS
--
Come hang out with other dev's in my Discord Community
/ discord
---
Keep up to date with everything I'm up to
www.kevinpowell.co/newsletter
---
Help support my channel
Get a course: www.kevinpowell.co/courses
Buy the t-shirt: teespring.com/stores/making-t...
Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@timgehrsitz3267]

Halfway through this video I thought "ah this is all common sense I don't need this" Then you hit the inline block button and i needed exactly that to fix a problem with my Vue.js project for a client 😂

[@DaScribe100]

Been wondering about this one for years, EXPLAINED at last. Thank you!

[@mohit_narang113]

why did you check MDN docs

[@osamasarhan6151]

My question is , you just said we can’t give inline element a height but we do give the image a height and it’s an inline element

[@amitkumargupta-]

@@osamasarhan6151 As Kevin has mentioned, Images are not precisely inline or inline-block element but something called Replaced Elements

[@iselaregain9301]

This makes my html & CSS class so much easier!! Thank you!

[@rickfearn3663]

Outstanding clarity, Kevin. You are an excellent educator. Thank you, Rick

[@earthycoin]

Kevin never stop posting the world needs you!

[@Steve-yk4fu]

This was well done! . The explanations were great, examples on point, and even the amount of time was just right. 👍

[@osamasarhan6151]

My question is , you just said we can’t give inline element a height but we do give the image a height and it’s an inline element

[@dukeselwood]

Great tutorial. This had really confused me and caused me lots of issues. I had not found this explained clearly anywhere else. Thanks!

[@piromaniaco3579]

Another awesome video from Kevin. You Conquering Responsive Layout course was amazing. I'm still working on the last final challenge. Really excited. Thank you for all! 💚

[@colindante5164]

I'm blown away how well you're able to articulate and explain things so clearly. Hats off to you Sir!! )))

[@gobideveloper111]

i am a beginner in web world little bit confused about inline and inline-block elements but now 100% completely understand that whole the elements how they are working .

[@kuldeepadhikari3849]

amazing channel and amazing css explanation, I have been struggling with css tricks for so much time now but your videos make them easier to understand and why they behave in certain ways when I expect something else !

[@stilgharc]

The best underrated web dev channel I have seen so far. I'm dumb or slow learner but the way Kevin Powell explain the concept of Web Dev , I easily understood it. Sorry for my Broken English not my native language. I wish my instructor is the same good as you are Mr.Powell. I hope you get more subs.

[@priyadharshanravichandran4483]

You're are a lifesaver man, idk why no one took the time to explain it as patiently as you did, since it's really intuitive if taught in the right way. People just say so we add block so we can give padding but never fully explained the reasoning.

[@austin4855]

These lessons are incredible. You have a specific way of teaching using live troubleshooting and clear communication, and you seem to have a knack for explaining just enough theory along with the practice to be helpful and not overwhelming. I've seen a few of your videos now and they have done more to help me develop a quick CSS intuition than any other content.

[@Eweyhen]

Once again, you come through for me when I need something explained simply. Thank you!

[@cedricluckett3874]

I would have so much use this clear and intelligible explanation when I started developing and was struggling with display issues. Thanks a lot!

[@mtslyh]

Great stuff! I'm binge watching as much of your content as I can.

[@RB-cx3ce]

Thank you Thank you Thank you. I am currently going through TOP's courses but I can see myself watching your videos for years to come! so again, THANK YOU!

[@shadowx7286]

Short and useful video that helps beginners understand a frustrating CSS syntax explained discreetly. This video is the definition of awesome!

[@BuzzMarketingKe]

Thank You Kevin Powell for contributing globally to so many people who wanted to learn html/css. Much respect from Kenya

[@BobaT__]

This has been the best explanation I’ve seen yet. Thank you so much and good job!

[@GohanOfDevs]

This is the best tutorial that has explained block, inline, and inline block elements and I've seen a lot lol. Please keep doing what your doing, very helpful.

[@dennisdecoene]

Well, I was in the same situation as some other comments. No other resource gave me a real good understanding about this rather fundamental concept. Thank you Kevin! I love your channel! ❤️

[@chicocrazy220691]

I love the way you explain things. Im a backend developer and learning a lot about css with your videos

[@Andrea-lf3jq]

You seem like the nicest human being. Also quality teacher 👏 thanks for all the content.

[@KevinPowell]

Thank you! 😃

[@Kevthedev00]

I have been using VS Code for years and didn't know how to do the whole comment out lines of code... you literally learn something new everyday!

[@renanrosa5527]

Such a crystal-clear explanation. Thanks a lot!

[@MasterAless]

It's been excellent, all the explanations, and the experiments with the inline-block elements, you've given such a nice idea to make future buttons in the future. Thank you so much man

[@savidya__]

Thanks heaps! I've been reading article after article about this and couldn't understand a thing. You made me move forward. 🙏

[@jaynetan6589]

An amazing detailed explaination. Kevin is becoming my fav KZbinr cuz he really brings in good value to us who has little to no money in KZbin & we can watch it for free. So grateful to have this man in KZbin. It's real dopee

[@ujwalchoudhary5412]

your art of explaining is just commendable!

[@duledudule]

I'm getting back to CSS coding and I immediately subscribed to you channel after watching this video. Nicely explained. Thanks Kevin!

[@jarbyvid]

This is great. Now I understand. Your delivery is awesome

[@shivaxxx2147]

I just started my coding career with a coding boot camp but I still come to videos like this for more insight. Thanks very much!

[@crawfordvining4208]

Great Video! Thanks for the link on the two value syntax for display. Good stuff!

[@Doraphobic]

Thank you so much for this. Been binge watching your videos, you are a life savior

[@luisanamora2363]

You're making my life so much easier learning CSS, thank you so so so much!!!!!!!

[@shirshak3699]

I have been mad searching about this online..thanks for explaining it so clearly.

[@WEBskie_pl]

LOVE YOUR TUTORIALS and EXPLENATIONS!

[@DinAmri]

Simple to follow and clear for a beginner. Thank You.

[@franciswoli2647]

You have really solved my problem with inline, block and Inline-block. thanks

[@houiderwalid5842]

this is the video i have been looking for, for ages ! best css video i've ever seen

[@derpydogz0259]

It’s easy to get lost searching for how to fix small issues in your html that you need to solve to build the site of your dreams, and it was hard to know the display property was what I needed to look for. Thank you for this tutorial. This knowledge will stick with me!

[@sakshamkapoor5905]

Amazing! So well explained ❤

[@chanduallada2417]

I have read some articles regarding inline-block but this one is awesome👌👏

[@adymorris7347]

Kevin - I'm afraid I am going to have to adopt you! Thanks so much for this explanation. I was really struggling with the concept, so - much obliged.

[@bolaray2760]

Incredible tutorial....I needed this for so long..watching this video has help me to solve my problem

[@Becca_Lynn]

This was very helpful! Thank you for explaining it so well and showing many examples. 😊

[@OrincyWhyteDesigns]

Been meaning to research this for a while, you are a great teacher!!!

[@suparnobhattacharya6345]

This channel deserves much much more subscribers. And also This channel is so underrated. Sir, please don't stop making videos. I've been binge-watching all your videos lately this quarantine.

[@zorkon08]

I can't even tell you how much stress this would have saved me had I known this 6 months ago. Thanks for great videos!

[@tofulosophy]

I love your videos! Keep em coming!

[@danmiller7709]

Clear and concise! Great content, quick and easy sub.

[@polarpalmwv4427]

I LOVE this video!! It is such a helpful description for beginners such as myself!

[@yofi2614]

Thank you! the best explanation for blocks and inline, kind of not really grasp this one but you helped me a lot!

[@julianapereira381]

Kevin, I love you! I've been learning web dev for the past 8 months now and it's so frustraring sometimes how there are a number of excellent web developers who unfortunately turn out to be awful teachers lol Thanks for this video! You've just earned another subscriber!

[@codewithme5398]

Excellent Video Kevin!

[@dharanyuvi6951]

Such a lovely explanation.., awesome dude - keep going

[@emkisn]

awesome video! i always watch all the videos even though this a beginner content, congratulations on the incredible work. a nice video idea that would be very useful is "when to use rem and px" is always a difficult subject

[@vasyaqwe2087]

This is so well explained, thank you!

[@marionwatkins8897]

You are such a darling. I like the fact that you always over explain things in general...and you know what? That benefits me. Don't change. Now, you have sparked up something else in my mind. Replaced Elements. I thought I subscribed a long time ago. Here's to You!! #muchappreciated.

Very well explained. Thanks for the video.

[@zurggie]

This is the best explanation I come across. Been wondering but didn't make any effort to understand it because I use flex everywhere.. Lol.

[@guillermomoreira5601]

You have the answer to every question about CSS that I have, you're something like the "CSS Wikipedia" for me!

[@travezripley]

Kevin, the CRL class was great. I learned so much, it was informative and very efficient. Thank you! I look to taking on the Scrimba classes.

[@KevinPowell]

Glad it was helpful! I hope that you're enjoying the Bootcamp too!

[@travezripley]

Kevin Powell every class you have created is great, I look so forward to them. I have a huge fondness because of your enthusiasm, I feel your content and Web Designer Magazine... give me a future to look forward to. I find so much inspiration, and has helped me develop my style.

[@K0lorado]

Thank you Mr Powell. You're such a great professor :)

[@jiwachhetri9262]

This guy's knowledge is another level

[@muhammadfitrie7061]

Brilliant explaination, thank you!!

[@SteveRunciman]

finally, after all these years, I understand...thank you!

[@suri5023]

anytime I forget something in CSS i search for Kevin's tutorials because I know that I will understand what he explains

[@soultalk1111]

Thank you kevin ! Really I was need it!

[@F272g]

Fantastic video! Thanks for the content you make.

[@sm3dev]

Thanks -- you made this super easy to understand!

[@abdishakur2489]

Easy explanation on these three confusing elements. Thanks bruh

[@ScottSW1990]

Great explanation! I was trying to move around a couple squares the other night and couldn't figure out why nothing was working. Thanks!

[@techwake360]

Thanks a lot for the explanation i enjoy watching your tutorials . its so help full for me

[@vladimirpetroski7089]

Halleluiah brother, you just brought my CSS game up like 10em notches! Thanks Kev, great video.

[@iftakharulislam9068]

whola i've looking for this problem last 8 month you made it dude.

[@evelynevervloesem437]

Thank you so much for this great and simple video made just for what I needed 😀 I am a UX designer and enthousiast coder😅 Since I do not code on a regular basis I tend to forget everything I’ve learned in trainings but these kind of short to the point video really help jog up my memory and have those « ahaaa yeah now I remember » moments 😀 so thank you for that!

[@kdog.unleashed]

Thank you for all your help!

[@Horrented]

Finally understood! Gosh thank you so much lol was stuck on this part of my course

[@arafadiat6447]

Great explanation as always!

[@farzinkhaledi1832]

great explain ,thanks Kevin

[@a-gamephile5613]

Thanks Kevin, great tutorial

[@poonamt]

thank you so much! I was really confused but now I understand :)

[@YayaYaya-wn4vg]

Thanks a lot for the explanation i enjoy watching your tutorials . its so help full for me... I am also a beginner on CSS

[@naram07]

Thank you!! I just came from a really confusing article which only makes sense now after watching this.

[@paulmozeley4473]

Thank you!! This helps make a lot of sense of the 3.

[@TheWildStatistician]

Well explained! Thank you!

[@johndrichardson2talks733]

Sir Kevin, you are great! Thanks

[@codingsprint6988]

Amazing explanation!

[@yepp9643]

thank you so much! Now I truly understand them!

[@laturchasanket6901]

Very nice sir!!! Learnt a lot.

[@11nolaboi]

This was very helpful thank you!

[@felicity_og]

This was so helpful! thank you!

[@katjakirchhofer9852]

Awesome tutorials! Thank you!!

[@ollyz2926]

Note from this video(please correct me if i am wrong): Block: always set on top of each other, even has space on the right side of page, width is 100%; Inline: only take the width the content need even the same line has other content, don’t force a new line; cannot accept height and margin, because it doesn’t change the layout; Inline-block: works when inline element want to have padding, height or margin; don’t force a new line;

[@ralphhuzz31]

exactly very helpful learning this little things since these are fundamentals

[@casperr3717]

05:07 at this moment he realized even the grand master can learn something new while teaching. XD

[@osamasarhan6151]

My question is , you just said we can’t give inline element a height but we do give the image a height and it’s an inline element

[@nicopicco]

you mentioned outline...that there was a thumbs up from me. thanks for that extra tidbit.

[@user-hj8zl1yw3k]

Thanks dude.... Got a more knowledge about this thing