box-sizing

Over the generations, people realized that math is not fun, so a new CSS property called box-sizing was created. When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with box-sizing: border-box; on both elements:

.simple {

  width: 500px;

  margin: 20px auto;

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

.fancy {

  width: 500px;

  margin: 20px auto;

  padding: 50px;

  border: solid blue 10px;

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

巴特西

box-sizing

最新文章

热门文章