box-sizing - HTML CSS CSS Property

HTML CSS examples for CSS Property:box-sizing

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. box-sizing

Description

The box-sizing CSS property sets the default CSS box model used by the browser to calculate the widths and heights of the elements.

The following table summarizes the box-sizing Property.

Item Value
Default value: content-box
Applies to:All elements that accept width or height
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


box-sizing:     content-box | padding-box | border-box | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
content-box width and height include only the content of the element. It does not include the padding, border or margin.
padding-box width and height include the padding size, and do not include the border or margin.
border-box width and height include the padding and border, but not the margin.
initial Sets this property to its default value.
inherit take the value of its parent element box-sizing property.

The example below shows the box-sizing property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 box-sizing Property</title>
  <style type="text/css">
    .box {<!--from w w w  . j  av a2  s .c om-->
        width: 50%;
        padding: 15px;
        float: left;
        text-align: center;
        background: #f0e68c;
        border: 5px solid #000;
        box-sizing: border-box;
    }
</style>
 </head>
 <body>
  <div class="box">
   Box1
  </div>
  <div class="box">
   Box2
  </div>
 </body>
</html>

Related Tutorials