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

Подписаться 913 тыс.

Просмотров 239 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 298

@timgehrsitz3267 3 года назад

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 4 года назад

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

@mohit_narang113 3 года назад

why did you check MDN docs

@osamasarhan6151 2 года назад

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- 2 года назад

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

@earthycoin 3 года назад

Kevin never stop posting the world needs you!

@iselaregain9301 3 года назад

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

@rickfearn3663 4 года назад

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

@gobideveloper111 4 года назад

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 .

@colindante5164 3 года назад

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

@stilgharc 3 года назад

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 2 года назад

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.

@dukeselwood 4 года назад

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

@piromaniaco3579 4 года назад

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! 💚

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

@kuldeepadhikari3849 3 года назад

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 !

@Steve-yk4fu 4 года назад

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

@osamasarhan6151 2 года назад

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

@cedricluckett3874 4 года назад

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

@Andrea-lf3jq 4 года назад

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

@KevinPowell 4 года назад

Thank you! 😃

@Kevthedev00 3 года назад

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!

@Eweyhen 2 года назад

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

@dennisdecoene 2 года назад

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! ❤️

@BuzzMarketingKe 2 года назад

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

@jiwachhetri9262 2 года назад

This guy's knowledge is another level

@GohanOfDevs 2 года назад

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.

@shivaxxx2147 2 года назад

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!

@shadowx7286 Год назад

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

@chicocrazy220691 3 года назад

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

@duledudule 3 года назад

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

@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!

@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!

@jaynetan6589 Год назад

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

@BobaT__ 3 года назад

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

@mtslyh 3 года назад

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

@MasterAless 8 месяцев назад

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

@ujwalchoudhary5412 2 года назад

your art of explaining is just commendable!

@renanrosa5527 3 года назад

Such a crystal-clear explanation. Thanks a lot!

@DinAmri 4 года назад

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

@zorkon08 3 года назад

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!

@julianapereira381 3 года назад

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!

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

@savidya__ 2 года назад

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

@jarbyvid 3 года назад

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

@chanduallada2417 3 года назад

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

@crawfordvining4208 4 года назад

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

@franciswoli2647 3 года назад

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

@shirshak3699 3 года назад

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

@luisanamora2363 2 года назад

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

@guillermomoreira5601 2 года назад

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

@ScottSW1990 3 года назад

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

@WEBskie_pl Год назад

LOVE YOUR TUTORIALS and EXPLENATIONS!

@Doraphobic Год назад

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

@zurggie 4 года назад

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.

@marionwatkins8897 3 года назад

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.

@sakshamkapoor5905 4 года назад

Amazing! So well explained ❤

@houiderwalid5842 3 года назад

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

@OrincyWhyteDesigns 2 года назад

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

@tofulosophy 4 года назад

I love your videos! Keep em coming!

@bolaray2760 3 года назад

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

@danmiller7709 3 года назад

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

@emkisn 4 года назад

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

@Becca_Lynn 2 года назад

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

@polarpalmwv4427 2 года назад

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

@suri5023 3 года назад

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

@dharanyuvi6951 3 года назад

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

@codewithme5398 3 года назад

Excellent Video Kevin!

@cusematt23 2 месяца назад

Kevin Powell is a CSS legend

@abdishakur2489 4 года назад

Easy explanation on these three confusing elements. Thanks bruh

@naram07 Год назад

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

@yofi2614 2 года назад

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

@casperr3717 3 года назад

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

@osamasarhan6151 2 года назад

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

3 года назад

Very well explained. Thanks for the video.

@vasyaqwe2087 2 года назад

This is so well explained, thank you!

@F272g 4 года назад

Fantastic video! Thanks for the content you make.

@suparnobhattacharya6345 4 года назад

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.

@muhammadfitrie7061 3 года назад

Brilliant explaination, thank you!!

@travezripley 4 года назад

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 4 года назад

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

@travezripley 4 года назад

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.

@soultalk1111 3 года назад

Thank you kevin ! Really I was need it!

@K0lorado Год назад

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

@evelynevervloesem437 2 месяца назад

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!

@sm3dev 3 года назад

Thanks -- you made this super easy to understand!

@ollyz2926 3 года назад

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 3 года назад

exactly very helpful learning this little things since these are fundamentals

@techwake360 4 года назад

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

@arafadiat6447 3 года назад

Great explanation as always!

@vladimirpetroski7089 3 года назад

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

@farzinkhaledi1832 2 года назад

great explain ,thanks Kevin

@laturchasanket6901 3 года назад

Very nice sir!!! Learnt a lot.

@a-gamephile5613 4 года назад

Thanks Kevin, great tutorial

@kdog.unleashed 3 года назад

Thank you for all your help!

@YayaYaya-wn4vg 3 года назад

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

@katjakirchhofer9852 3 года назад

Awesome tutorials! Thank you!!

@iftakharulislam9068 3 года назад

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

@Spacetime23 5 месяцев назад

Beautifully explained !!! Subscribing right now.... Wish you had some English captions as well for catching up with the speed meant for non-native Americans or British English speakers.