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 😂
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!
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.
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 .
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.
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;
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 !
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?
An amazing detailed explaination. Kevin is becoming my fav RUclipsr cuz he really brings in good value to us who has little to no money in RUclips & we can watch it for free. So grateful to have this man in RUclips. It's real dopee
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.
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! 💚
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! ❤️
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.
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.
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!
Here is a positive feedback my firend. I did not understand a clear thing because you are giving extra extra informations between your sentences. It works for me like his -> just say what happens when you do bla bla and it works tike this because bla bla. I mean i need the topic to be simple as possible. Personally i do not need much jokes, not need extra coverage about recent trends or any extra info. I just need the root and then i can learn quickly and easily so that makes me love your videos and continue following. Thanks for lessons. Best Luck.
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.
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?
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?
Its amazing to see how someone who posts useful nerdy content gets only half a mil subs whereas someone who does some crazy things like outdoor cooking or stupid dance jumps gets few million. Intelligence is an underappreciated asset in a world full of stupidity.
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.
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.
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.
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.
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
Thanks so much Kevin! Well, I had to have watch the last part of the video in 0.75speed, because inline and in the line and inline-block are quite hard to differentiate when you finishing so fast
Hi, thank you. This was great! I have a problem that I can't really seem to solve: how does one avoid addition of spaces between inline elements? I have a tag with tags inside it. Something like: A list of links: L1, L2, and L3.. This is rendered with spaces in front of the comma and the full-stop. I don't understand why, and how do I make it stop doing that? :(
I am noticing that you use a // before some tags and it makes that line inactive. How does that work? I hadn't seen that before, which isn't surprising because I am new, but I tried using that on my practice code and it didn't do anything.
It's commenting them out, since I'm writing SCSS, you can do single line comments like that. If it was a regular CSS file, it would have just been toggling /* text here */ - in VS Code you can hit ctrl + / (or cmd on mac)
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!
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.
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 :-)
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.
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 😂
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!
Been wondering about this one for years, EXPLAINED at last. Thank you!
why did you check MDN docs
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
@@osamasarhan6151 As Kevin has mentioned, Images are not precisely inline or inline-block element but something called Replaced Elements
This makes my html & CSS class so much easier!! Thank you!
Great explanation! I was trying to move around a couple squares the other night and couldn't figure out why nothing was working. Thanks!
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.
Glad it was helpful! I hope that you're enjoying the Bootcamp too!
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.
This was well done! . The explanations were great, examples on point, and even the amount of time was just right. 👍
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
Simple to follow and clear for a beginner. Thank You.
You seem like the nicest human being. Also quality teacher 👏 thanks for all the content.
Thank you! 😃
05:07 at this moment he realized even the grand master can learn something new while teaching. XD
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
Great Video! Thanks for the link on the two value syntax for display. Good stuff!
Thanks dude.... Got a more knowledge about this thing
Clear and concise! Great content, quick and easy sub.
Outstanding clarity, Kevin. You are an excellent educator. Thank you, Rick
Kevin never stop posting the world needs you!
AWESOME VIDEOL FUNNY TO WATCH. THANKS FOR KEEPING SOME BLUNDERS IN. MAKES YOU AWESOME
Amazing explanation, thanks :)
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 .
Drop your CSS-fear...And suddenly disappear? = Display: None🤣👌
Great tutorial. This had really confused me and caused me lots of issues. I had not found this explained clearly anywhere else. Thanks!
Image is inline but But top and bottom margin margin work in that? Please explain I am wondering from six month. Thanks🙏❤
Finally the inline-block demystified! 15 years later!
You have really solved my problem with inline, block and Inline-block. thanks
anytime I forget something in CSS i search for Kevin's tutorials because I know that I will understand what he explains
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.
Kevin! I'm trying to do work, stop making so many helpful videos!!
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;
exactly very helpful learning this little things since these are fundamentals
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 !
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?
I'm blown away how well you're able to articulate and explain things so clearly. Hats off to you Sir!! )))
An amazing detailed explaination. Kevin is becoming my fav RUclipsr cuz he really brings in good value to us who has little to no money in RUclips & we can watch it for free. So grateful to have this man in RUclips. It's real dopee
Great video! I love your content Kevin. I have a question. Can you tell me why "transform" doesn't work on inline elements?
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.
LOVE YOUR TUTORIALS and EXPLENATIONS!
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! 💚
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! ❤️
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.
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.
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.
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!
You have the answer to every question about CSS that I have, you're something like the "CSS Wikipedia" for me!
Here is a positive feedback my firend. I did not understand a clear thing because you are giving extra extra informations between your sentences. It works for me like his -> just say what happens when you do bla bla and it works tike this because bla bla. I mean i need the topic to be simple as possible. Personally i do not need much jokes, not need extra coverage about recent trends or any extra info. I just need the root and then i can learn quickly and easily so that makes me love your videos and continue following. Thanks for lessons. Best Luck.
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.
Thanks heaps! I've been reading article after article about this and couldn't understand a thing. You made me move forward. 🙏
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
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?
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?
Amazing! So well explained ❤
Great. this explains the reason behind some abnormal behaviours i come accross
Its amazing to see how someone who posts useful nerdy content gets only half a mil subs whereas someone who does some crazy things like outdoor cooking or stupid dance jumps gets few million. Intelligence is an underappreciated asset in a world full of stupidity.
Yesterday I spent 2 hrs and the solution was inline block wow 😑💜💁 thanks man
Thank you!! I just came from a really confusing article which only makes sense now after watching this.
Would a correct way to think about inline-block be: You get to set the values of a block element with the display of an inline element?
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.
you teach good but ..... your expressions make me uncomfortable .....
Finally understood! Gosh thank you so much lol was stuck on this part of my course
lol finally i understand why some elements do not work with height or margin-top. It would always make me crazy
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.
Easy explanation on these three confusing elements. Thanks bruh
Thank you so much for this. Been binge watching your videos, you are a life savior
not only i learned inline-block but i understand why margin:top never wroks
a better approach to comment blocks in VSC would be to use the Shift+Alt+A shortcut
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.
how did you transitioned your webcam from full size to small circle when video started?
Finally found the answer why the button I created was working the way it was.
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
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.
Great explanation. But couldn't help noticing you got a big head😅
I really wanted to know why not block but inline-block when I use button, thank you!!!
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 ?
thank you so much!
I was really confused but now I understand :)
Great video. Thanks for Ctrl + /. Really 🙂
outstanding explanation... new subscriber!!
Have I become color blind or that "red" outline on the paragraphs are orange?
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!
I love your videos! Keep em coming!
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
finally, after all these years, I understand...thank you!
Very well explained. Thanks for the video.
Thanks so much Kevin!
Well, I had to have watch the last part of the video in 0.75speed, because inline and in the line and inline-block are quite hard to differentiate when you finishing so fast
I found that , inline-block allows block-level elements to be placed side by side also with adjustable height properties.
This is so well explained, thank you!
nice👌👍
Sir Kevin, you are great! Thanks
Good explannationg........Thankyou sir!!!
Thanks dad, your videos are excellent.
Hi, thank you. This was great! I have a problem that I can't really seem to solve: how does one avoid addition of spaces between inline elements? I have a tag with tags inside it. Something like: A list of links: L1, L2, and L3.. This is rendered with spaces in front of the comma and the full-stop. I don't understand why, and how do I make it stop doing that? :(
thank you so much! Now I truly understand them!
why does "link/button" start on a new line? it is just an inline element.
I am noticing that you use a // before some tags and it makes that line inactive. How does that work? I hadn't seen that before, which isn't surprising because I am new, but I tried using that on my practice code and it didn't do anything.
It's commenting them out, since I'm writing SCSS, you can do single line comments like that. If it was a regular CSS file, it would have just been toggling /* text here */ - in VS Code you can hit ctrl + / (or cmd on mac)
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!
Waaaaaaaoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooow! Thanks Sensei !
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.
@7:52 what is the shortcut that you use to turn off the elements, thanks!
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 :-)
First
This guy's knowledge is another level
This was very helpful thank you!
Hello Kevin, do you have a video like that to inline with pictures? i can't a stuck with that
If you need images next to each other, they're inline by default.
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.
Thank you!! This helps make a lot of sense of the 3.