CSS Box-Sizing

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

The CSS box-sizing property enables the user to include the padding and border in an element’s total width and height.

Without the CSS box-sizing Property

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element

height + padding + border = actual height of an element

This refers to: When the width/height of an element is set, the element often is displayed bigger than it has been set (because the element’s border and padding are added to the element’s specified width/height).

The below example illustrates two <div> elements with the same specified width and height:

CSS

				
					<h1>Without box-sizing</h1>
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>
</body>

Output

With the CSS box-sizing Property

The box-sizing property enables the user to use the padding and border in an element’s total width and height.

If box-sizing: border-box; is set on an element, padding and border are used in the width and height:

HTML

				
					<h1>With box-sizing</h1>
<div class="div1">Both box are same </div>
<br>
<div class="div2">Hello</div>
<p>
The result of using the box-sizing: border-box; is better, many developers want all elements on their pages to work this way.
The code makes sure that all elements are sized in a proper way. Many browsers use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).
You can apply this to all elements:
</p>
<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br>
  Comments:<br>
  <textarea name="message" rows="5" cols="30">
  </textarea>
  <br><br>
  <input type="submit" value="Submit">
</form>

CSS

				
					body {
  margin: 0;
}

* {
  box-sizing: border-box;
} 

input, textarea {
  width: 100%;
}

Output