Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

Importance Of Box-Sizing CSS
   (1 review)

isoldehn
  • Here to save the day for those troubling with padding and border causing additional pixels to your widths.

    Type: Look & Feel Software: Jcink, Invision Power Services (IPS), Journals (Tumblr, Wordpress, Livejournal, Insanejournal), MyBB, Nova, phpBB, Proboards (Freeforums), SMF, XenForo, Other

Importance Of Box-Sizing CSS

This should be a normal web standard by now for all web design developers (for us it would be users developing themes for MyBB/Jcink/whatever software we use to roleplay).

box-sizing: border-box; is here to save the day for those troubling with padding and border causing additional pixels to your widths.

 

I have attempted to make this guide short and to the point but also giving a bit of insight as to what exactly this magic trick can do for you!

 

-----------------------

 

What is my web page/themeing/etc. like without border box?

Lets say you have an element set to 200px width (like a sidebar) but the thing is, you NEED it to be that width and not exceed such width. However you went to add a border around it, maybe padding inside and that made the width go further! How frustrating right? So now you have to figure out for example if you added 20px of padding, that means 40px all together (both left and right) so to get your element back to 200px you have to subtract and make the set width 160px. This can be annoying and very tedious but is quite common for a lot of theme creators to deal with these days.

 

What is my web page/themeing/etc. like with border box?

So that element we discussed having 200px width and you need it that way will stay 200px in width NO MATTER the amount of padding or border you add! This is because border box counts that as part of the element so adds those inside the width. Not a pain in the rump! You can now avoid the tedious calculations of the past and continue forth ready to wield the hammer and pound out your greatest and newest contribution to the web space themes.

 

-----------------------

 

Well how do I use this? Simple really lets reset your HTML to use border box and then reset other elements to inherit this trait! You will need to add this to a global version of your CSS (one that is attached to all pages).

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}

 




User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

memoria

Report ·

· Edited by memoria

  

I do like box-sizing and use it religiously, however, parts of this tutorial are not true. Box-sizing doesn't effect margin in the same way that it does for border and padding. For example, if you have a div with box-sizing: content-box (the typical default browser value) and apply the following:

width: 200px;
padding: 0 20px;
margin: 0 20px;
border: 1px solid black;

The total area width of that element is 282px. This includes the width property, margin sides, padding sides, and border. Once you apply box-sizing: border-box, the total area width with the same properties is 240px. Box-sizing will help you calculate things like border and padding, but it won't help you with margin woes unfortunately.

Response from the author:

Thanks, I will fix by removing margin.

Share this review


Link to review

×

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.