CODEWITHSUNDEEP
cssfancyboxpadding
thelolcat
thelolcat

Reputation: 11555

*{ box-sizing: border-box }

*{
  box-sizing: border-box;
}

Is this a good idea? Any drawbacks?

I find this very useful when I want an element to have 100% and some inner padding. Because I don't have to add another element inside for the padding :/

Upvotes: 16

Views: 7173

Answers (2)

Josh Powell
Josh Powell

Reputation: 6297

I have started to use this almost always.

The Pros,

You do not need to calculate out the CSS box-model anymore.

You can easily add large padding to an object without have to re-fix your height/width

Faster coding of your css (look up SASS if you have not)

The cons,

IE7 and below have no support, who cares right? Some sadly do.

IE8 and up have only partial support.

This is how I go about this if I don't want everything to have it,

div, li, p {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

I add the elements that I know will utilize this property and to prevent every object from having that property.

Upvotes: 14

vernak2539
vernak2539

Reputation: 596

The biggest drawback is that it doesn't work in a lot of browsers, most specifically < IE8. Check it out the usage here.

When I use this, I usually make sure I have all of the following in my stylesheet

.my-element {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

Upvotes: 2

Related Questions