InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS box-sizing – impact on padding and border

on Apr 16, 2016

CSS box-sizing decides if specified width, height, etc. will apply to content area of an element or to whole element including padding and border.

CSS property box-sizing

CSS version: CSS 3
Value: content-box | border-box
Initial: conent-box
Applies to: all elements that accept width or height
Inherited: no

box-sizing values

valueDescription
content-boxspecified width and height apply to of the content box of the element. Two element with same width and height but different padding or border will have different overall size.
border-boxspecified width and height apply to of the whole element including padding and border. Two element with same width and height but different padding or border will have same overall size

Example – box-sizing content-box and border-box

In the following code, CSS property box-sizing can be changed to the following values
  • content-box
  • border-box
<style type="text/css">
.box {
  width: 100px; height: 100px;
  background-color: lightgreen;
  float:left; margin:10px;
  /*default box-sizing is content-box*/
  box-sizing: content-box;
}
.box1 {
  padding: 2px;
  border: 2px solid lightblue;
}
.box2 {
  padding: 10px;
  border: 10px solid lightblue;
}
</style>

<div class="box box1">Hello world</div>
<div class="box box2">Hello world</div>
box-sizing refresh done
try it online

Related

  • CSS margin area of a box
  • CSS - margin collapsing
  • CSS border - define border properties of an element
  • CSS padding inside a box

Specification and Browser compatibility

SpecificationStatusCategories
CSS3 Box-sizingW3C Candidate RecommendationCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 10+ Yes 29+ Yes 8+ Yes 12+ Yes 5.1+ Yes 10.0-10.1+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 5.0-5.1+ Yes 10+ Yes 10+
source: caniuse.com

Suggested posts:

  1. CSS border – define border properties of an element
  2. CSS border radius and round corners examples
  3. CSS border-width – set element border width of four sides
  4. CSS border-style tutorial and examples
  5. CSS border-color – define color of four borders
  6. CSS padding inside a box
  7. CSS resize – make block element resizable by user
  8. CSS3 cursors – change cursor on an element
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress