Box Sizing in CSS

This box-sizing CSS property sets how the total width and height of an element is calculated.

Value	used for
box-sizing	This defines how the width and height of an element are calculated, should they include padding and borders, or not.
content-box	This width and height properties and min/max properties includes only the content. Border and padding are not included
border-box	This width and height properties and min/max properties includes content, padding and border.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
    width: 300px;
    min-height: 300px;
    background-color: aliceblue;
    border: 5px solid black;
    padding: 15px;
    box-sizing: border-box;
    }
  
  </style>
</head>
<body>
  <h1>Box-Sizing in CSS</h1>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil optio recusandae eveniet voluptates fugit ipsam voluptatibus hic reprehenderit incidunt harum similique suscipit error provident magni quaerat, repellat aut quos pariatur! Nemo sit id adipisci eum libero, iusto ex consequuntur, autem in placeat facere sed distinctio dolorum non nam nihil explicabo aspernatur, cupiditate ipsa? Perspiciatis,
  </div>
</body>
</html>

Output

Live Preview

CSS Tutorial

Properties Reference

CSS Properties Reference Guide

Box Sizing in CSS

Source Code :

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects