box-sizing: border-box (EASY!)

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). I'll help you master the latest tech here:
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Email newsletter (React + Next.js course out soon!): email.bytegrad.com
💻 Premium Courses:
Professional JavaScript: bytegrad.com/courses/professi...
Professional CSS: bytegrad.com/courses/professi...
All courses: bytegrad.com/courses
🔔 Email newsletter (get new course discounts): email.bytegrad.com
0:00 Used in CSS resets
0:43 Box model
2:30 content-box and border-box
3:05 Adding padding
5:55 Adding border
#box-sizing #border-box #css #webdevelopment #coding #programming

[@ByteGrad]

Mastering JavaScript is crucial if you want to be a modern, professional developer: ua-cam.com/video/qVmpJDQxucE/v-deo.html

[@lemonadeforlife]

Odin Project recommended your video. And I understood why now.
Simple, precise and no bs.
thanks man. You gained another subscriber,

[@pritambera5879]

If you are looking for box-sizing explanation, this is the only one you need.

[@oluwaseyioyedeji]

This is the only video i've watched on the box--sizing property that i did not get lost. Clear and Direct!

[@IliaSavin-og3ck]

The best and the only needed explanation for box sizing. Thank you! Here from the odin project

[@ayam3330]

honestly this is the best explanation of border box, i was struggled to understand before

[@jd4300]

Amazing explanation man. 2 years into my career now as a web designer. So happy I found your channel. It's a hidden gem. I have never seen explanations so clear and concise. You are a great teacher and clearly embody an elite skillet. New subscriber here : ). Keep up the amazing work.
I used to set box-sizing: border box all the time but kind of understood it. But not really. After watching this video it is so much more clear I could actually explain it to someone else if I had to now. Thank you!!!

[@ByteGrad]

Love to hear it, thanks

[@rusirumunasingha2234]

Love the simple and to-the-point explanation, man. Subbed!

[@ghaithjr.9189]

I’ve been lost in youtube jungle searching for a real good explanation for the css box model and among of all them you are the winner , so weird how this video didn’t get so much view because I read the number with a “k” honestly by the time I’ve seen your video I thought it’s 363k instead of only 363 , keep the great work you are doing

[@fatemamotiwala8554]

This is the most simple and best explanation of the concept. I was so confused and now it seems so easy. Thank you

[@user-lj6dc5qh7q]

Odin Project sent me here..... I love the simple and informative description and i'm sure to return for more. Thanks @ByteGrad

[@itsalexsa_m]

The best explanation, very good!

[@JaraafYamang]

Honestly that Best explanation between the parenthesis is a FACT!! There's not a better video. Thanks @ByteGrad. You kept a new subscriber!!

[@Auranimali]

Great videos. Clear, efficient, and simple examples. Thank you!

[@DigiPros210]

A very clear basic explanation unlike others, thanks dude.

[@tedndg]

i've never bothered to actually look this up, great explanation

[@qasimawan3569]

This is great, thank you for explaining this clearly!

[@AmirmohammadKhosravi-kk6or]

Your explanation was perfect bro! thanks.

[@davidperlow3603]

This is not the best explanation about border-box, it is the ONLY explanation! 😄Great job, you did such a great job in explaining the concept in-and-out. I really liked how you went step by step and used clear white boxes. The explanation of the math as well as showing the differences each time made this concept so available to me. Thank you, I was stuck on this issue and can now progress!!!! Wishing you great success-

[@sambitdas5946]

Really very clear explanation. Just loved it❤

[@Mane_Tech]

I haven't found a better explanation on the box-sizing property as I have in this video.

[@a_maxed_out_handle_of_30_chars]

simple, concise, and to the point
thank you :)

[@gotfragMIMK]

Man i watched like 2 videos and i can understand them clearly. Congratz, you should really have more subs minimum 300k, but for me you need to have 500k+, just my feeling. Its rare to see constructed explanation + step by step with such clarity. Thank you

[@nicolaswnorowsky1680]

ty came from odin project

[@ibtyhale3370]

thank u . finally i understand the box sizing part

[@ayanonlinee]

Love it, You make it so much easier and clear ❤

[@faruqabolarin916]

A very clear explanation, I appreciate man. just what I wanted.

[@dougm3162]

The only dude that explained it well. Thankyou so much bro

[@JuliaLee-kp5ny]

the best explanation ever! thank you!

[@servantofourlordjesuschris6456]

Great explanation! Just making things simple.

[@mostafasv]

Thanks for this amazing explanation

[@mr.v.sanjay9847]

Understood Brother. Thank you so much.

[@mikayla3386]

Here from The Odin Project!

[@helveticdisplay]

such a masterclass!

[@krishna-tv8ju]

seriously thanks for this explanation...

[@Grindeddude]

Thank you very understandable explanation .

[@ashokyadavfqplmgxjia4668]

wow what a explanation sir................

[@ChineduKadurumba-di1qm]

great lesson

[@georgehope5477]

Brilliant! Thank you.

[@axis4337]

vera level explanation thaliva

[@israelmbuyu4487]

great explanation sir.

[@wrestlingEmpire1]

Amazing man
Thank you

[@CarlosGutierrez-hw3zb]

Me quedo claro, gracias!

[@user-ql6lp1yo1u]

amazing man keep up the good work

[@silverfullbuster9177]

Just curious, are you a self learning web developer and what stage level would you say you are at currently?

[@soumitrapal8681]

It's great 😃

[@MartinPiorkowski-ss6jb]

Hey I was sent by the odin project this was a perfect explanation with the border-box so you have my thanks! I was wondering though, how did you get your html to space out the two boxes with just ? for me my boxes stay connected.

[@ashokyadavfqplmgxjia4668]

nice explainatin sir .....

[@farisgebremariam9088]

Jesus. Best explanation. Thank you.

[@mannnie55]

Man ur too good

[@devaraj7070]

Super bro

[@arshad1781]

Thanks

[@yabezD]

if i add an image to my website, and i have added some margins and borders to, why would i have to treat it as the border-box. if i increase the size of my image, i expect it to increase the image right ?

[@user-cy8qh6qe2m]

Odin project brought me here!

[@maedsonsantos6433]

same

[@sattmowards]

@@maedsonsantos6433 did you finish

[@maedsonsantos6433]

@@sattmowards No, it will take a long time to finish. I'm in the Fundamentals, the Flexbox part to be more specific

[@sattmowards]

@@maedsonsantos6433 But I'm already in the Javascript section

[@bornofmindghimire5888]

What if " multiple nested div, all having border inside main-div which also have border "? I had done it and things not working. I do have to use both Universal * box-sizing :border-box and again on main div i have to put box-sizing: content-box.After that it works what would be the reason.? Please make video on it.Thankyou

[@ConfusedHelmet-kd2wg]

in my case i need to add px after each number, but in some video i see people only write number without th px measumrint unit

[@MoreData-hz8hm]

ODIN PROJECT LETS FUCKIN GO

[@nusratarif6519]

t th tha than thank thanks......

[@deiviihernandez6059]

Thanks a lot!