box-sizing Archives - Lena Design

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

Demo:

Syntax:

box-sizing: content-box|border-box;

content-box (default) – the width and height properties (and min/max properties) includes only the content (border and padding are not included).

b0rder-box – the width and height properties (and min/max properties) includes content, padding and border.

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

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#ex-1 {
  box-sizing: content-box;  
  width: 300px;
  height: 100px;
  padding: 30px;  
  border: 10px solid #0a9396;
}

#ex-2 {
  box-sizing: border-box;
  width: 300px;
  height: 100px;
  padding: 30px;  
  border: 10px solid #0a9396;
}
</style>
</head>
<body>


<h4>box-sizing: content-box (default):</h4>
<p>Width and height only apply to the content of the element:</p>
<div id="ex-1">Content</div>

<h4>box-sizing: border-box:</h4>
<p>Width and height apply to all parts of the element: content, padding and borders:</p>
<div id="ex-2">Content</div>

</body>
</html>

Output:

box-sizing: content-box (default):

Width and height only apply to the content of the element:

Content

box-sizing: border-box:

Width and height apply to all parts of the element: content, padding and borders:

Content

Enjoy coding!