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

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

[@earthycoin]

Kevin never stop posting the world needs you!

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

[@rickfearn3663]

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

[@Andrea-lf3jq]

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

[@KevinPowell]

Thank you! 😃

[@dukeselwood]

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

[@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 😂

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

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

[@savidya__]

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

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

[@shadowx7286]

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

[@joeloftus6148]

Dude! You have helped me SO MUCH over the past few weeks :) I just started a self-managed bootcamp with The Odin Project, and while they are amazing, students still have to take the initiative to source complimentary learning materials. I've watched tons of tutorials over my first month to get the basics of HTML and CSS, and your teaching/tutoring style matches my learning style perfectly. My goal is to get my first coding job by April of next year, and when I do, I'll be contributing a good few bucks to your Patreon. In the meantime, hopefully my views, clicks, and likes are bringing in a bit of KZbin revenue for you. Thanks again!

[@Kirihere]

how did it go?

[@joeloftus6148]

@@Kirihere It went really well! Definitely took longer than April, but I just started an internship with an incredible company at the beginning of January. I'm hoping to eventually get brought on full-time!

[@Kirihere]

@@joeloftus6148 congratulations!

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

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

[@vladimirpetroski7089]

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

[@cedricluck]

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

[@BobaT__]

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

[@cusematt23]

Kevin Powell is a CSS legend

[@rawdelicious]

Finally the inline-block demystified! 15 years later!

[@tsutsuji1164]

I really wanted to know why not block but inline-block when I use button, thank you!!!

[@renanrosa5527]

Such a crystal-clear explanation. Thanks a lot!

[@nicopicco]

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

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

[@tofulosophy]

I love your videos! Keep em coming!

[@soultalk1111]

Thank you kevin ! Really I was need it!

[@polarpalmwv4427]

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

[@maheephoenix4398]

I am still a little confused about how can I use the property but I guess I need practice. Also, thank you so much for the CSS comment shortcut (Command +/) it was the most annoying thing to type in every time.

[@tommy10436]

Thanks dad, your videos are excellent.

[@muhammadfitrie7061]

Brilliant explaination, thank you!!

[@dharanyuvi6951]

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

[@kdog.unleashed]

Thank you for all your help!

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

[@Ostap1974]

One good thing to know is that (in that rare case) you need a horizontal scroll for div with background color, inline-block is the savior.

[@11nolaboi]

This was very helpful thank you!

[@jeremys3418]

The go to css expert😊

[@laturchasanket6901]

Very nice sir!!! Learnt a lot.

[@felicity_og]

This was so helpful! thank you!

[@saeednrzadeh4754]

Thanks for this video , What is the best method to move that button in to the center of the page when it is inline block ?

[@aliata9154]

my native language isn't english and I love how you say the word "OUT". I don't know where you from but it is funny to me. :DD

[@vitaly_p]

Great video! Thank you!

[@a-gamephile5613]

Thanks Kevin, great tutorial

[@das_evoli]

lol finally i understand why some elements do not work with height or margin-top. It would always make me crazy

[@marcovanali1449]

Thank you fro the video, very useful and well explained. Be able to do a code pen was very helpful

[@katjakirchhofer9852]

Awesome tutorials! Thank you!!

[@cheaterman49]

Great video! I'm a bit surprised where you went with inline-block ; indeed, I liked how you described blocks as having a mandatory line break after them no matter their set width, and I thought you would simply describe inline-block as being the same as a block just without the implicit line break ; is there any reason you didn't go for it? Perhaps it's not as good a mental model as I'm thinking right now? While your practical examples are great, I remember doing layout with inline-block back in the day, so we usually downgraded a block to inline-block instead of upgrading an inline to inline-block, if that makes sense. Of course nowadays flex is king :-)

[@milicatest9206]

Thank you very much sir🙏

[@marajulislam4691]

Good explanation ❤️

[@mindmynotes8851]

how did you transitioned your webcam from full size to small circle when video started?

[@zakariabenfikri8092]

@7:52 what is the shortcut that you use to turn off the elements, thanks!

[@marco7838]

When I create a p tag and double click on it, in the browser. It takes up a lot of space than it should. Maybe because it is a block level element that when I double click the blue space is quite big. How can I contain this and minimise the amount of space an element takes up?

[@Nadia-wu9hk]

Thank you very much!!

[@muhanad102]

How can I make a list of strings to be Inline and to look like a normal text block. Span tag didn't work with long strings and it kept showing missing text. I think with inlineblock the problem is if the text can't fit in the available space the whole text will go into a new line.

[@sirmiles1820]

Very helpful.

[@devednyavyas7800]

Thank you kevin for this.

[@aarjith2580]

5:07 Kevin: NO impact whatsoever The code: Am I joke to you?!

[@AhmedZahid1]

Thank you sir

[@insPIreMath]

Great Video! But..........if you give a button a width (input element that is display:inline;) it shows up!!!!!!!! Why is that? Is it because they are replaced elements Kevin? Just like images?

[@romanext921]

At 11:55, I wished you talked about the whitespace between the elements. It seems that if these a tags are written without any newlines or tabs or spaces, this little gap goes away. It annoyed me for hours.

[@masteryourownway]

Hello Kevin, do you have a video like that to inline with pictures? i can't a stuck with that

[@KevinPowell]

If you need images next to each other, they're inline by default.

[@ScienceSeekho]

Thanks

[@neeyoumnaanum4355]

Lovely video

[@ovoono9708]

You' re my Hero!

[@evandromatt]

Great vídeo 😁

[@westfield90]

Never understood this for sooooo long

[@english51]

非常清楚

[@apilacharya4093]

you are hero

[@khaihoang7420]

why does "link/button" start on a new line? it is just an inline element.

[@abdullahbukhari1469]

Waaaaaaaoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooow! Thanks Sensei !

[@ikirachen]

Ctrl+K,C works for commenting too

[@familyminivloga9422]

What is the difference between display and possition

[@deltame3264]

Position property is about quite litterally the position of the element on the screen, display property is about the way the element is displayed, not the position. You cant specify where to place your element on the screen with display property.

[@jayadevrajendran]

Pls do a video on display: flex

[@ohiwantyoutobelieve]

10/10

[@Horoe]

them boxes I dont wanna select

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

[@marco7838]

When I create a p tag and double click on it, in the browser. It takes up a lot of space than it should. Maybe because it is a block level element that when I double click the blue space is quite big. How can I contain this and minimise the amount of space an element takes up?

[@iselaregain9301]

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

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

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

[@arpitkumar5821]

Image is inline but But top and bottom margin margin work in that? Please explain I am wondering from six month. Thanks🙏❤

[@ToycarsaddictDaily]

Drop your CSS-fear...And suddenly disappear? = Display: None🤣👌

[@suri5023]

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

[@franciswoli2647]

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

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

[@mohammadmehdiemamhdi1192]

nice👌👍

[@sakshamkapoor5905]

Amazing! So well explained ❤

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

[@jackr9122]

Kevin! I'm trying to do work, stop making so many helpful videos!!

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

[@carbellsarfo]

Great. this explains the reason behind some abnormal behaviours i come accross

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

[@joaocoelho2929]

First

[@amitkumargupta-]

Thanks @Kevin. Anyone looking for notes: Q.1 - Block, Inline, and Inline-Block explained | CSS Tutorial *Block Level Element:* - width: 100%;. - Stack on each other vertically. (Enforces a new line) *Inline Level Element* - width: widthOfContent; - height does not work - margin top/bottom does not work - padding top/bottom does work (Layout wise) - height can be changed using font-size *Inline Block Level Element* - width: widthOfContent; - Goes one after another in a horizontal line. - We can set margin/padding on it. *Replaced Elements* - Images behave like inline-block elements but these are called replaced elements.

[@Spacetime23]

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.

[@kevinrusch3627]

Thanks for explaining. However, every time you explain how these things work, I want to scream "WHY DID THEY DO IT THIS WAY???". I just don't get who thought this up and believed they were making a system that was clear, concise, or the most practical.

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

[@WEBskie_pl]

LOVE YOUR TUTORIALS and EXPLENATIONS!

[@Horrented]

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

[@BloodyClash]

actually you COULD manipulate those invisible lines by creating a modified DOM. PHP can do that (yes - i always prefer PHP over Javascripty bipty). 😁so if you would wanna destroy all convetions you would be able to do that.