Site menu

CodeCook.io

  • Languages
    • C
    • C++
    • CSS
    • Git
    • HTML
    • Java
    • JavaScript
    • jQuery
    • PHP
    • Python
    • Ruby
    • Scala
  • border
  • box
  • margin
  • padding
  • sizing
  • spacing

CSS - Box-sizing

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. -- MDN Box sizing

Accepted values: content-box (default), padding-box, border-box, inherit

3
626
  • Share on Facebook
  • Share on Google+
  • Share on Twitter

Implementation with vendor prefixes borrowed from CSS3 Please!

* {
  -webkit-box-sizing: {{boxModel}}; /* Android ? 2.3, iOS ? 4 */
     -moz-box-sizing: {{boxModel}}; /* Firefox ? 28 */
          box-sizing: {{boxModel}}; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
}
css

Notes

last update: Nov. 11, 2014

Advertisement

This project is hosted on DigitalOcean, try it and support us

Related concept

  • Box-shadow

Random task

  • Get last element of array
  • rounded-corners
  • Check console available
  • Function default parameter
  • String concatenation
  • Blog
  • About
  • License