W e b t u t o r i a l s

Define CSS

CSS Comment

CSS Selectors

CSS Inline Style

Internal Style Sheet

External Style Sheet

CSS Color Property

CSS Font Property

CSS Background

CSS Box Model

CSS3 Border Radius

Styling HTML Table

Styling Links

CSS Menu

Display, Visibility

CSS Overflow Property

CSS Position, Z-index

CSS Outline, Offset

CSS Cursor Property

CSS3 box-sizing

CSS Web Layout

CSS Website

Google Fonts

Google Map

Login Form

Google Page

Facebook Page

CSS Assignment List

CSS3 box-sizing Property

The box-sizing property is used to tell the browser what the sizing properties. Should they include the border, padding in a box or just the contents.

PropertyValue
box-sizingcontent-box | border-box.
Default value is content-box.

In content-box: border and padding is not included in the width and height of the element, whereas, in border-box: border and padding is included in the width and height of the element.

Example : Box-sizing: border box.

Coding

<html>
  <head>
    <style> 
      div.container {
        box-sizing:border-box;
        width: 100%;
        border: 1em solid;
      }

      div.box {
        box-sizing:border-box;
        width: 50%;
        border: 1em solid red;
        float: left;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">This div occupies the left half.</div>
      <div class="box">This div occupies the right half.</div>
      <div style="clear:both;"></div>
    </div>
  </body>
</html>