*{ Box-Sizing: Border-Box }

*{ box-sizing: border-box }

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.

Maybe sometimes box-sizing:border-box' it doesn't work properly?

To be clear again: box-sizing: border-box; make the box include the border into width and height calcul of the block.

It does not apply padding-bottom because you are setting a box of height: 100px

But next to that you are setting border of 40px and padding of 20px. So if you think about it reachs: 40px + 40px + 20px + 20px = 120px just for padding and border.

So this is going over the block height you set 120px > 100px. So html try to make its best based what your telling it.

I would recommand as follow:

.box {
  min-height: 100px;
  height: auto;
}

DEMO:

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  min-height: 100px;
  height: auto;
  width: 500px;
  padding: 20px;
  border: 40px solid black;
  background-color: blue;
}

<div class="box">
   With border-box - with padding & border
</div>

CSS box-sizing: border-box still adding border size to element width

This was actually very simple.

I was missing that the .cont div is 200px with 1px border left and right.

Therefore the .h_row inside it is 198px with box-sizing as used.

Thus the .cell need to add up to 198px and not 200px.

I knew it was something simple - just needed a little help finding it!

-Thanks @ZohirSalak!

Can I use box-sizing: border-box; in universal selector (*) every time?

If you start a new project it might be ok and clean to add * { box sizing: border-box; } at the beginning so you can use it on the entire project and everyone else developing on the project will see it.

BUT if you work on an existing project and then just add * { box sizing: border-box; } somewhere could mess up the entire layout! So there it might be "safer" to only add it to the containers you are working on with something like .border-boxed-container * { box sizing: border-box; }. Or have an extra class like "border-boxed" which you can add to every element accordingly the CSS .border-boxed { box sizing: border-box; }

box-sizing: border-box = for IE8?

IE8 supports the unprefixed version of box-sizing, but as with all "new" CSS features it only does so in standards mode. -ms-box-sizing has never been used by any version of IE.

Make sure your page has a doctype declaration to trigger standards mode in browsers. You should also place your unprefixed box-sizing after all the prefixes, not before them, and get rid of -ms-box-sizing as it's really not needed.

Table cells increases width despite box-sizing: border-box

Try using below code, I was able to validate with you angular code:

*{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

table {
  border-collapse: collapse;
  width: 100%;
table-layout:fixed;
}
table td, table th {
  border: 1px solid red;
color:red;

}

table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

ul{
padding:0;
}  

 .move-right td{     
  font-weight: bold;
  background-color: lightgreen;
  padding-left:80px;
  }

---

Related Topics