Learn CSS Box Model In 8 Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 มี.ค. 2019
  • 🚨 IMPORTANT:
    Learn CSS Today Course: courses.webdevsimplified.com/...
    In this video I will be explaining the most important concept of CSS. The box model. Everything in CSS is made of boxes so it is crucial to understand how the CSS box model works. In this video I will use examples to explain and show how the box model works on CSS elements, and by the end of this video you will have a complete understanding of the CSS box model.
    Box Model Article: blog.webdevsimplified.com/202...
    Twitter:
    / devsimplified
    GitHub:
    github.com/WebDevSimplified
    CodePen:
    codepen.io/WebDevSimplified
    #BoxModel #WebDevelopment #CSS

ความคิดเห็น • 416

  • @thelitterateman
    @thelitterateman 2 ปีที่แล้ว +991

    The Odin Project is officially pumping some viewership to you.

    • @ricardodelacruz8666
      @ricardodelacruz8666 2 ปีที่แล้ว +31

      I came from The Odin Project too!!! lol

    • @carlosrangel4500
      @carlosrangel4500 2 ปีที่แล้ว +7

      @@ricardodelacruz8666 Me too :)

    • @willywonka4761
      @willywonka4761 2 ปีที่แล้ว +4

      @@ricardodelacruz8666 same

    • @ItTakesTimeToBeGood
      @ItTakesTimeToBeGood 2 ปีที่แล้ว +4

      Just came after searching for box model on youtube. Found what I was looking for to clear out all confusions. Exactly what I needed. I was having trouble formatting content with float and clear based on box model. This was super helpful! 👏🏼

    • @ninjamaster7986
      @ninjamaster7986 2 ปีที่แล้ว +2

      Lol, What are you doing here?

  • @Fuckingcoward
    @Fuckingcoward ปีที่แล้ว +1068

    Good luck to everyone on their Odin Project Coding Journey, consistency is key! doesn't matter when you started or how difficult it is, stick to it long enough and you shall succeed.

    • @freerights6695
      @freerights6695 ปีที่แล้ว +8

      yessir

    • @Fuckingcoward
      @Fuckingcoward ปีที่แล้ว +18

      @@marshallbrannan8672 don't mention, I'm almost done with the introduction course. I'm also in uni rn doing a CS degree, so it's taking me longer to complete TOP, but I'm determined to finish anything I start.

    • @hmcdaniel7
      @hmcdaniel7 ปีที่แล้ว +8

      @@marshallbrannan8672 I'm 50% of the way through as well. Good luck to you all!

    • @hey_avacado
      @hey_avacado ปีที่แล้ว +4

      @@marshallbrannan8672 same here lol. It's so nice to meet people like me. I wish we could connect. Goodluck on your journey.

    • @Fuckingcoward
      @Fuckingcoward ปีที่แล้ว +9

      @@marshallbrannan8672 I'm going with the javascript pass since it offers more opportunities in the field but maybe I'm just being biased. At the end of the day, these are all just tools to make ends meet so just pick whichever suits u the best and make sure you become the most proficient and creative person in it.
      It's great to see people with a similar mindset here, wish you all success.

  • @madalchemist31
    @madalchemist31 6 หลายเดือนก่อน +54

    The part at 6:29 might be confusing for some people, so I explained it here:
    User here tells you that the total size of the element is 180x180, despite him specifying the height and width properties with value of 100px.
    So, user here wants the total size of the element to be 100x100, not 180x180.
    He tells you that there is a property called "box-sizing" with value "border-box".
    "border-box" takes into account the height and width values you mentioned, which are 100px for height and 100px for width.
    What "border-box" will do is make the total size of the element 100x100.
    To do this, it will first look at the current border and padding numbers (margin is out of the question because we said margin is not taken into account in the total element size), and it will work out the total element size using these numbers.
    User changes the border size to 20px, and padding still remains as 10px.
    Let's work this out. Assume the initial total element size is 0px.
    20px border up and 20px border down means that the total element size is now 40px.
    Padding. 10px padding up and 10px padding down means that the total element size is now 40px + 10px + 10px = 60px.
    FInally, "border-box" subtracts this 60px from the desired total element size, which is 100px. So 100px - 60px is 40px.
    This 40px number we just calculated will be given to the element content size. So now, the total element size is 40px (the element content size) + 60px (the element padding and border sizes) which gives us a total element size of 100px.
    This entire process repeats for left and right (the width), causing the total element area to be 100x100. Pretty cool, right? Rewatch this part if you're still confused while reading, and focus, and tell me if you got it!
    ALSO I'M A THE ODIN PROJECT STUDENT!!!

    • @BhaveshPatil-fh1cy
      @BhaveshPatil-fh1cy 5 หลายเดือนก่อน

      me too from odin project

    • @Deva_10th
      @Deva_10th 4 หลายเดือนก่อน +1

      thank you so much Its help me a lot!!!

    • @AlejandraCH6669
      @AlejandraCH6669 29 วันที่ผ่านมา

      nice explanation! I actually get it now🤭

  • @DANNFIGDESIGNS
    @DANNFIGDESIGNS 5 ปีที่แล้ว +201

    Did not know the margins collapse. Thank you.

    • @WebDevSimplified
      @WebDevSimplified  5 ปีที่แล้ว +44

      It is something that I did not realize for a long time as well. It definitely confused me a few times.

    • @komkwam
      @komkwam 5 ปีที่แล้ว +9

      But in CSS grid that is no longer the case anymore, then both margins are displayed.

    • @knyto2
      @knyto2 3 ปีที่แล้ว +3

      @@komkwam This is the case for CSS flex as well

    • @thodsaphonsonthiphin4889
      @thodsaphonsonthiphin4889 3 ปีที่แล้ว

      ya , this help me a lot

    • @jorgedavalos5663
      @jorgedavalos5663 3 ปีที่แล้ว

      what would be the idea behind margins behaving like that, very confusing!!!

  • @AlexTechie
    @AlexTechie 4 ปีที่แล้ว +245

    This is one of the most important things to understand about web design, arguably the first thing everyone needs to learn, but a lot of us just go on without fully understanding it, myself included. Thank you for breaking it down and telling us what the Box Model is, what the different properties do, and what we need to know in order to style elements exactly how we want them to look. I'm gonna get to work on it and make notes in my HTML/CSS lab! 👍

    • @WebDevSimplified
      @WebDevSimplified  4 ปีที่แล้ว +30

      You are so correct. Many people including myself skipped over the box model when learning since it is boring but it would have saved me so much time if I understood it properly.

    • @bhaveshrughwani
      @bhaveshrughwani 2 ปีที่แล้ว +1

      This video is a equivalent to a holy scripture like Bible/bhagwat Geeta for people to understand how to design apps be it on Android/iOS/web.This was helpful for me as a flutter developer.

  • @neilrudnick7875
    @neilrudnick7875 2 ปีที่แล้ว +46

    Pay attention to how he "comments out" an element at 6:35. ctrl + / has been a game changer for me. It allows me to select an element and toggle it on/off and see its effect.

    • @SmartSleeper
      @SmartSleeper ปีที่แล้ว

      how do i do this lol? doing ctrl + shift +7 doesnt work lmao

    • @rohanofgondor
      @rohanofgondor ปีที่แล้ว +1

      ​@@SmartSleeper if you're on Linux/Windows, it's Ctrl + K + Ctrl + C and for windows, Mac: Command + K + C.

    • @courtneysdani
      @courtneysdani 11 หลายเดือนก่อน

      For Mac it's ( Alt / )

    • @courtneysdani
      @courtneysdani 11 หลายเดือนก่อน

      This was super helpful, thanks noticing it and sharing!

  • @Jedi.Trader
    @Jedi.Trader 2 ปีที่แล้ว +35

    Gets tricky with the height and width being eaten up after box sizing, but you make it easier to understand! Thanks!

  • @habert7669
    @habert7669 3 หลายเดือนก่อน +3

    still consistent from odin project starting to realize how css is important to learn dont rush over

  • @PM-4564
    @PM-4564 4 ปีที่แล้ว +6

    I've been watching tutorials where I would type in the CSS line by line hoping to finally understand what it means, but this video finally did it.

  • @dmc549
    @dmc549 5 ปีที่แล้ว +39

    Excellent explanation. This is by far the clearest I've found so far. Thanks!

    • @WebDevSimplified
      @WebDevSimplified  5 ปีที่แล้ว +6

      Thanks! I am really glad you enjoyed it.

  • @cienyan
    @cienyan 2 ปีที่แล้ว +5

    I learned so much in 8 mins. It's very easy to understand the way you explained. Thank you!

  • @crazybieberchic
    @crazybieberchic 2 ปีที่แล้ว +8

    Thank you, this was so simple to understand. You're a great teacher

  • @BenjaminCummins
    @BenjaminCummins 2 ปีที่แล้ว +1

    I learned more from this 8.5 minutes than most tutorials online! Thanks.

  • @watchmanscall2643
    @watchmanscall2643 4 ปีที่แล้ว +9

    I'm a student of coding and programming and this box model stuff with the content, padding, border and margin has always confused me. Today I am no longer confused but rather empowered to conquer this. i just told my wife, where's this fella been all my life. lol Thank you sir! Hell, I even broke out the crayons to draw this stuff in my notebook! lol

  • @nidhalabidi69
    @nidhalabidi69 4 ปีที่แล้ว +2

    Thank you for explaining the box model so well !! I'm going to use your channel as the first resource to understand new things in CSS . Keep it up

  • @princeshassi3788
    @princeshassi3788 4 ปีที่แล้ว +5

    Bro Love your simple style from Pakistan. I was struggling with CSS Flex even in the first place I don't even know about Box model but after watching this and other of your's (Position is css) I am very much clear. Thanks again.

  • @hiteshchalise3988
    @hiteshchalise3988 4 ปีที่แล้ว +16

    Margin Collapse surprised me, didn't know thanks :)

  • @codingwithbasit7801
    @codingwithbasit7801 5 ปีที่แล้ว +3

    Thank you for explaining man! thumbs up.

  • @BuzzMarketingKe
    @BuzzMarketingKe 2 ปีที่แล้ว

    Thanks man!I truly appreciate you taking your time to help people on youtube get the content we need.
    Much Respect from KENYA 🇰🇪

  • @AshishGupta-be2yz
    @AshishGupta-be2yz 3 ปีที่แล้ว +42

    The way you explained too easily is amazing. Got cleared many doubts. Thanks a lot

  • @swtpeteswtpete1515
    @swtpeteswtpete1515 3 ปีที่แล้ว +7

    Kudos! Excellent presentation and pace and style. You could teach a udemy or community college class for money for sure. Thanks! I'm just starting to learn CSS3

  • @ozzyfromspace
    @ozzyfromspace 5 ปีที่แล้ว +41

    OMG for some reason I wasn't getting it during my class lectures. You cleared it up so well man, thank you! I really appreciate how easy you are to understand. Best wishes my man!

    • @WebDevSimplified
      @WebDevSimplified  5 ปีที่แล้ว +10

      I'm really glad I was able to help. Good luck on your future learning!

  • @eddybobea6709
    @eddybobea6709 2 ปีที่แล้ว

    Extremely helpful, didn't have a remote idea that the margin was shared between two elements...Concise explanation, thank you.

  • @RobertParslow
    @RobertParslow 3 ปีที่แล้ว

    Thanks for the explanation of the box model. This was the best I have seen. Clearly explained and WHY. Thank you much.

  • @OtakuDev_
    @OtakuDev_ 4 ปีที่แล้ว +1

    THANK YOU. I was struggling with this, you made it easy to understand =].

  • @flower-butter3920
    @flower-butter3920 ปีที่แล้ว

    This is one of the best videos I have seen that explains it perfectly!!! Thank you so much!!!

  • @yookyungchang1518
    @yookyungchang1518 3 ปีที่แล้ว

    So simple and well explained. Thank you so much.

  • @kylerkeeley
    @kylerkeeley 3 ปีที่แล้ว +13

    *realizing I’ve spent a couple weeks trying to understand something you explained so clearly in 8 minutes*
    Thank you!

  • @thecoolnewsguy
    @thecoolnewsguy ปีที่แล้ว +1

    I finally understood the box model because of you! Thanks a lot sir! You really cleared my confusion!

  • @oliviakrause3336
    @oliviakrause3336 ปีที่แล้ว +1

    Thank you so much for this video. My brain just totally burnt out in my WebDev course and you were able to explain it in a way I can actually take in.

  • @rafatulalam8677
    @rafatulalam8677 3 ปีที่แล้ว

    You videos are helpful for last minute interview prep !

  • @corygold8206
    @corygold8206 2 ปีที่แล้ว +1

    Great stuff! Thank you for such an insightful video

  • @haisonduong4726
    @haisonduong4726 3 ปีที่แล้ว

    The lesson is so amazing.
    Thank you so much

  • @ZanxCodes
    @ZanxCodes 4 หลายเดือนก่อน

    Thanks a lot, you made it so much easier to understand by using crystal-clear explanations and live examples!

  • @summerkoushal679
    @summerkoushal679 2 ปีที่แล้ว

    enjoyable, clear and easy. you are the one to whom I search whenever I stuck in any web situation, thanks for uploading videos for us .

  • @pvd4170
    @pvd4170 ปีที่แล้ว

    Thank you and to The Odin Project for such helpful information! I do not know how I was learning more advanced things without full understanding of this essential topic.

  • @AayushBartaula
    @AayushBartaula 3 ปีที่แล้ว +1

    Best explanation ever thankyou so much Kylle

  • @isaiahquigley8232
    @isaiahquigley8232 2 ปีที่แล้ว

    Thank you! This really helped me understand CSS better!

  • @elliotalderson2580
    @elliotalderson2580 ปีที่แล้ว

    cheers! I'm doing this at Uni and you made a complicated page very simple.

  • @georgejetson9801
    @georgejetson9801 3 ปีที่แล้ว

    This is so helpful. I forget the deets of the box model if I haven't used css in awhile so this is good for the oh yeah, I remember it now.

  • @tripvida
    @tripvida 2 ปีที่แล้ว

    Thank you, nicely explained and easy to understand.

  • @supergalaxyfist7730
    @supergalaxyfist7730 ปีที่แล้ว

    Thank you, I found this really helpful and easy to digest. much appreciated!

  • @ragnar0721
    @ragnar0721 2 หลายเดือนก่อน

    This was the fastest 8mins I've spent on a coding video. Love the conciseness

  • @willywarburton9417
    @willywarburton9417 3 ปีที่แล้ว

    This saved a lot of headache, very fundamental, thank you 🙏

  • @sagarkumar4816
    @sagarkumar4816 3 ปีที่แล้ว

    u r simply the best ..... dont know how u make concepts and topic so clear and easy .

  • @mohammadabdelrahman786
    @mohammadabdelrahman786 2 ปีที่แล้ว

    dude i finally understand the margin... I never knew it collapses to the largest value! Now things make sense!
    You got my sub! You're amazing and thank you very much for this! Really really appreciate it! Vielen Dank!

  • @peterkohout7901
    @peterkohout7901 3 ปีที่แล้ว

    Very clear and succinct. Thank you for sharing.

  • @Dizzifer9538
    @Dizzifer9538 3 ปีที่แล้ว

    short and clear , love it

  • @PfizZz
    @PfizZz 3 ปีที่แล้ว

    Cleared up a lot. Thank you for your help.

  • @user-bl4hl5yd9z
    @user-bl4hl5yd9z 8 หลายเดือนก่อน

    Thanks!! You example the information very well.

  • @gomz810
    @gomz810 3 ปีที่แล้ว

    So clearly, so easy to understand.

  • @yusufaltundal3482
    @yusufaltundal3482 2 ปีที่แล้ว

    That was great explaining ! Thanks for video.

  • @russtheceo4246
    @russtheceo4246 ปีที่แล้ว

    Thank you! This video really helped me understand this concept.

  • @giriibm21
    @giriibm21 ปีที่แล้ว

    This is so good. short and sweet!

  • @huysaysoui
    @huysaysoui ปีที่แล้ว

    I’ve been struggling understand this concept. Amazing tutorial ❤

  • @pemadechen9199
    @pemadechen9199 ปีที่แล้ว

    Thank you the words are crystal clear. Much love

  • @spec12368
    @spec12368 2 ปีที่แล้ว

    i highly recommend any one still starting in css to take Kyle css course one friend on mine took the course and after going through it with him I definitely learn more about css and not still that afraid about it really thanks to you Kyle and to my friends that took the course

  • @firdausahmat1960
    @firdausahmat1960 2 ปีที่แล้ว

    This exactly what i needed!
    Thanks man

  • @TheBearCoder
    @TheBearCoder 2 ปีที่แล้ว

    Thank you so much! Now i finally understand the box model :D

  • @jorgenetto429
    @jorgenetto429 ปีที่แล้ว

    what a great surprise! I already knew your chanel, and The Odin Project linked this tutorial in one of the chapters!

  • @ElWillyNacho
    @ElWillyNacho 3 ปีที่แล้ว

    This was very useful, thank you very much! greatings from Chile!

  • @progtom7585
    @progtom7585 4 ปีที่แล้ว

    hey mate, i had seen the graphic before for the box model, i didnt know pre this video that you could inspect the box model in dev options - so your vid helped a lot - much easier than reading MDN notes on the same concet. also good to know that margins auto collapse. thanks!

  • @brightanyawe1493
    @brightanyawe1493 4 หลายเดือนก่อน

    Great work there, Very Simple To Understand

  • @alphacentauri8035
    @alphacentauri8035 5 ปีที่แล้ว

    Great explanation, finally i understood padding and margin ...✌️

  • @alexrc7146
    @alexrc7146 11 หลายเดือนก่อน

    Fantastic video!!! Thank you so much!!

  • @BlackDeath920
    @BlackDeath920 3 ปีที่แล้ว

    OMG thank you thank you thank you! You made it make sense. Had to watch it several times but I got it. Thank you!!!!

  • @nonono6537
    @nonono6537 5 หลายเดือนก่อน

    explained very clearly, thank you!

  • @explosionsofawesomeness959
    @explosionsofawesomeness959 2 ปีที่แล้ว

    you really made it make sense buddy. thanks!

  • @penguin1234ification
    @penguin1234ification 4 ปีที่แล้ว +1

    Thank you so much! now I know when to use them rather than hovering over my box model every time :)

  • @darkhorsemusicco.5156
    @darkhorsemusicco.5156 4 ปีที่แล้ว

    thank you! very clear and well explained. love your channel

  • @againstobs
    @againstobs 2 ปีที่แล้ว

    Thank you my friend, because of you I was able to figure out CSS!

  • @kakao3088
    @kakao3088 3 ปีที่แล้ว

    your explanation is easy to understand, thanks for the video 👍

  • @aubreyoliver7374
    @aubreyoliver7374 4 ปีที่แล้ว

    Great overview of the box model. Thanks!

  • @Kreytonchild
    @Kreytonchild ปีที่แล้ว +1

    Thank you so much for this. Its a lot better to understand. I ended up joining a bootcamp, but didn't quite mention the overlapping.
    Do you have a video as well for HTML arranged? for example, content inside the box model?

  • @JimFikes
    @JimFikes 3 ปีที่แล้ว

    Very well explained. Thank you.

  • @MelSonio
    @MelSonio หลายเดือนก่อน

    Thank you. I was very confused on margin and padding until I watched this!

  • @melania239
    @melania239 3 ปีที่แล้ว

    finally I complete understood the box model. thanks 🍎

  • @oceanvvl
    @oceanvvl 2 ปีที่แล้ว

    BEST and PRECISE explanation EVER !!!
    (for myself, with all do respect for other authors)
    I went through quite a number of other videos;

  • @eirakim1128
    @eirakim1128 ปีที่แล้ว

    I don't know what it is about this video but every other explanation of the box model I've encountered so far just completely threw me. Thanks so much for breaking down such an important concept so perfectly

  • @AriaHarmony
    @AriaHarmony ปีที่แล้ว

    Woah I never knew about the larger margin rule! Thank you so much!

  • @titaprincessdiary
    @titaprincessdiary ปีที่แล้ว

    thanks to your videos. Direct and easy to understand.

  • @ddlesch88
    @ddlesch88 ปีที่แล้ว

    Thanks for the content. It is much appreciated.

  • @elg281
    @elg281 2 ปีที่แล้ว +1

    You are a really good instructor thanks for the content subscribing and thumbs up

  • @davidperlow3603
    @davidperlow3603 ปีที่แล้ว

    Very Nice Video, great pace!

  • @sausage4mash
    @sausage4mash 4 ปีที่แล้ว +1

    That was very clear, thank you !

  • @isaiahsanchevy9252
    @isaiahsanchevy9252 2 ปีที่แล้ว

    This was very helpful. Thank you.

  • @goverdhanjayaram3683
    @goverdhanjayaram3683 ปีที่แล้ว

    Thank you very much for this video ! It is very useful !

  • @MrBingo37
    @MrBingo37 3 ปีที่แล้ว

    great tutorial, thanks WDS!

  • @_.sunnyraj._
    @_.sunnyraj._ 3 ปีที่แล้ว

    Really really thanks
    I had know idea what is border-box used for

  • @saramahamed7343
    @saramahamed7343 7 หลายเดือนก่อน

    Amazing video. Thanks!

  • @patitatitatitatitona
    @patitatitatitatitona ปีที่แล้ว

    great video, thanks! doing the odin project

  • @olafv.2741
    @olafv.2741 4 ปีที่แล้ว

    Nice video! Very much to the point and easy to follow.

  • @GokuHindustani
    @GokuHindustani 3 ปีที่แล้ว

    i watched lots of video nobody explained this correctly but you do thank you

  • @hagelsnow1789
    @hagelsnow1789 3 ปีที่แล้ว

    I love the way you explain this

  • @tszkinwong6170
    @tszkinwong6170 ปีที่แล้ว

    Thank you for your clear explanation

  • @patrickren7395
    @patrickren7395 5 ปีที่แล้ว +1

    Wow, I dont even know box-sizing before. Awesome video

    • @WebDevSimplified
      @WebDevSimplified  5 ปีที่แล้ว +1

      It is one of the best CSS properties in my opinion.

  • @manoharnaga
    @manoharnaga ปีที่แล้ว

    amazing video I have ever seen before!!

  • @AlThePal78
    @AlThePal78 2 ปีที่แล้ว

    omg that is the purpose border box I couldn't understand it till now :) good job explaining thanks

  • @wajahatkhan9455
    @wajahatkhan9455 5 ปีที่แล้ว +2

    ❤Fantastic! Thanks Sir!

  • @aggsdpz
    @aggsdpz ปีที่แล้ว

    Amazing content, thanks!