Using Box-sizing border-box CSS

Published January 9, 2015 by CSS Newbies.

Box-sizing in CSS tells the browser how to size the width and height and what to set them too. By default the width and height properties are set to content-box in CSS. Setting the box-sizing to border-box tells the browser to show the box with the set width and height and place both the padding and border inside of the box.
This is supported by all modern browsers and IE 8.0 and on.

Border-box is one of four values you can set for box-sizing. The remaining three are:

content-box: (default) Height & width includes only the content, not border, padding, or margins.
initial: Sets to default value
inherit: Inherits the value from any parent element.

<style> 
.contain {
    width: 500px;
    border: 5px solid red;
}

.box {
    box-sizing: border-box;
    width: 25%;
    border: 10px solid blue;
    float: left;
}
</style>

<div class="contain">
  <div class="box">Left</div>
  <div class="box">Middle left</div>
  <div class="box">Middle right</div>
  <div class="box">Right</div>
  <div style="clear:both;"></div>
</div>

  1. Pingback: The Basics of Border-Radius in CSS | Lunarium Design

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>