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.

#CSS

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---



---

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 YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[iselaregain]

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

[DaScribe]

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

[earthycoin]

Kevin never stop posting the world needs you!

[austin]

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.

[gobideveloper]

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 .

[Steve-ykfu]

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

[rickfearn]

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

[timgehrsitz]

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 😂

[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.

[priyadharshanravichandran]

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.

[derpydogz]

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!

[RB-cxce]

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!

[colindante]

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

[bingers_uk]

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

[BuzzMarketingKe]

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

Much respect from Kenya

[ollyz]

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;

[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.

[Kevthedev]

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!

[jiwachhetri]

This guy's knowledge is another level

[savidya__]

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