Course Content
CSS Basic
0/1
CSS Selectors
0/1
CSS Comments
0/1
CSS Backgrounds
0/1
CSS Borders
0/1
CSS Outline
0/1
CSS Fonts
0/1
CSS Icons
0/1
CSS Links
0/1
CSS Lists
0/1
CSS Tables
0/1
CSS Display Properties
0/1
CSS Positioning Elements
0/1
CSS Z-Index Property
0/1
CSS Overflow
0/1
CSS Float
0/1
CSS Opacity
0/1
CSS Forms
0/1
CSS Dropdowns
0/1
CSS Buttons
0/1
CSS Media Queries
0/1
About Lesson

box-sizing: border-box;

Definition:

The box-sizing property defines how the total width and height of an element is calculated.

  • Default Behavior (content-box):
    • By default, width and height apply only to the content area, and padding and border are added outside it.
  • With border-box:
    • When you use box-sizing: border-box;, the padding and border are included inside the total width and height.
    • This makes layout easier and more predictable

Syntax:

selector {
  box-sizing: border-box;
}

Example:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .default-box {
      width: 300px;
      padding: 20px;
      border: 5px solid red;
      background-color: lightcoral;
      margin-bottom: 20px;
    }

    .border-box {
      width: 300px;
      padding: 20px;
      border: 5px solid green;
      box-sizing: border-box;
      background-color: lightgreen;
    }
  </style>
  <title>Box-Sizing Example</title>
</head>
<body>
  <div class="default-box">
    box-sizing: content-box (default)
  </div>
  <div class="border-box">
    box-sizing: border-box
  </div>
</body>
</html>

Output: