• Tổng Hợp
  • 34

box-sizing: border-box explained

box-sizing: border-box explained



You probably see box-sizing: border-box used all over the place. I use it in my tutorials, it’s used in most written and video content I see. In this video, I take a look at what border-box is, and why it’s really awesome.

CSS-Tricks article I mentioned in the video:


Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community:

I have a newsletter!

New to Sass, or want to step up your game with it? I’ve got a course just for you:

My Code Editor: VS Code –

How my browser refreshes when I save:

Support me on Patreon:

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 YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram:
Twitter:
Codepen:
Github:

Nguồn: https://ijetmr.org/

Xem thêm bài viết khác: https://ijetmr.org/tong-hop/

34 Comments

  • Kiera Myher

    Kiera Myher

    July 27, 2020

    Is there a way to center it?

    Reply
  • Paulo Garcia

    Paulo Garcia

    July 27, 2020

    Thank you very mush, brother. I don't speak English very well but I can understand it .

    Reply
  • Muh RTN

    Muh RTN

    July 27, 2020

    damn i like the way u explain things u got the thumb up , (if u could just speak a lil bit slower like really a lil bit lol) thank you mate 😀

    Reply
  • Israphial

    Israphial

    July 27, 2020

    This was really helpful, thanks.

    Reply
  • Syed Iqbal Ahmed

    Syed Iqbal Ahmed

    July 27, 2020

    see later …

    Reply
  • Louis Gamor

    Louis Gamor

    July 27, 2020

    This is awesome Kev.👍 I've always been wondering why you say it makes our lives much easier

    Reply
  • Miguel de Sousa

    Miguel de Sousa

    July 27, 2020

    thnks for keeping it simple 🙂

    Reply
  • Paul Ft

    Paul Ft

    July 27, 2020

    How to resolve 2 years of CSS frustration. That should be the first property learnt in any CSS lesson

    Reply
  • Yashasvi

    Yashasvi

    July 27, 2020

    I wonder if this is something that simplify the use then why isn't this a default behaviour?

    Reply
  • Gideon Okokoro

    Gideon Okokoro

    July 27, 2020

    another question i have is: what is the different between border and outline

    Reply
  • Gideon Okokoro

    Gideon Okokoro

    July 27, 2020

    Thanks to you for all your videos and the recent ones on "building a responsive layout". i do put box-sizing in my code without knowing how it works but this video of yours has explained it. i love the simplicity.
    i have question though, i do see people use *, html and body. what is the difference?

    Reply
  • Quinn Wilson

    Quinn Wilson

    July 27, 2020

    Thanks for this!

    Reply
  • Frank Martin

    Frank Martin

    July 27, 2020

    Good tutorial but your voice speed is way to fast and annoying. I'm an undergraduate and inductee in the English Honor Society with a 4.0 PGA, your tutorial gets confusing.

    Reply
  • Diamondz

    Diamondz

    July 27, 2020

    Thank you so much! This really helped

    Reply
  • Syed Iqbal Ahmed

    Syed Iqbal Ahmed

    July 27, 2020

    valo

    Reply
  • Mauricio Lacerda

    Mauricio Lacerda

    July 27, 2020

    The box-sizing: inherit is a nice trick!

    Reply
  • rameen alikhani

    rameen alikhani

    July 27, 2020

    Thanks, very informative. box-sizing won't give me headaches anymore! The only problem that I need to tackle is just rent!😂

    Reply
  • MacLinz Universal Channel

    MacLinz Universal Channel

    July 27, 2020

    Thanks for explaining this in a much more understandable way

    Reply
  • Ahmed Mahmoud Abd Elhamid

    Ahmed Mahmoud Abd Elhamid

    July 27, 2020

    Great

    Reply
  • Dilshard

    Dilshard

    July 27, 2020

    Thank you kevin for short and simple explanation.
    subscribed and liked 🙂

    Reply
  • Adarsh Pandey

    Adarsh Pandey

    July 27, 2020

    You are really good on picking up topics to discuss. Really helpful discussion. Thanks a lot❤️❤️❤️

    Reply
  • William James Rapp

    William James Rapp

    July 27, 2020

    Interesting I am basically a Beginner in HTML5 and CSS3 and I am TRYING to learn how to UN FUCK my web page to look right but what I find interesting about your tutorial is that you are talking to experienced developers and not beginners. DO YOU KNOW OF ANOTHER PLACE I CAN GO AND LEARN THIS ?

    Reply
  • Adam Gardner

    Adam Gardner

    July 27, 2020

    Such a clear explanation, thank you! One question, at 2:33, does this mean that the padding is essentially reduced from 25px to 20px to account for the addition of the 5px border?

    Reply
  • FAHA SHARAPOV

    FAHA SHARAPOV

    July 27, 2020

    Thanks, Kevin. You have a very pleasant voice and you explain things well! Two thumbs up!

    Reply
  • Onesmus

    Onesmus

    July 27, 2020

    I didn't even have to watch the whole video to understand,
    Good work Powell !

    Reply
  • Justin Linn

    Justin Linn

    July 27, 2020

    Have been web dev for two years and feel betrayed no one has informed me of this trade secret

    Reply
  • SparklesBohanson

    SparklesBohanson

    July 27, 2020

    Thanks Kevin

    Reply
  • Charles Mullen

    Charles Mullen

    July 27, 2020

    border box saved my life

    Reply
  • мυнιтυℓ nαвín

    мυнιтυℓ nαвín

    July 27, 2020

    best video for the particular topic <3

    Reply
  • CowsRcooL

    CowsRcooL

    July 27, 2020

    thanks

    Reply
  • MOON'S DONUTS

    MOON'S DONUTS

    July 27, 2020

    he thanks man i was just stuck im new to this but this vid helps

    Reply
  • Shrook Wageh

    Shrook Wageh

    July 27, 2020

    the best explanation <3

    Reply
  • Innocent

    Innocent

    July 27, 2020

    thanks this video helped a ton. i tried to study this on w3schools but it was so confusing.

    Reply
  • 무미뮈

    무미뮈

    July 27, 2020

    better explained than forums and courses! Thank you. You saved my time!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *