Learn CSS

"If you want to learn how to style and design web pages, you need to master CSS. CSS stands for Cascading Style Sheets, and it is the language that defines the appearance and layout of HTML elements. In this course, you will learn the basics of CSS, such as selectors, properties, values, units, and colors. You will also learn how to use CSS to create responsive web design, animations, transitions, and more. By the end of this course, you will be able to create beautiful and functional web pages using CSS."

CSS Chapters Menu

CSS Box Sizing

CSS box-sizing is a property that controls how an element's width and height are calculated. It defines whether an element's padding and border should be included or not in the total width and height of the element.

 

Syntax

The syntax for box-sizing property is as follows:


selector {
 box-sizing: content-box | border-box | initial | inherit;
}

There are two possible values for the box-sizing property:

  • content-box: This is the default value. The width and height of an element do not include padding or border. If you set the width or height of an element, it will only affect the content area of the element, not the padding or border.
  • border-box: The width and height of an element include padding and border. If you set the width or height of an element, it will affect the total size of the element, including the padding and border.

 

Example

Here is an example:


<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 10px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box">Hello, world!</div>
</body>
</html>


In this example, the .box element has a width of 200px and a height of 100px. It also has 20px of padding and a 10px border. With box-sizing: border-box, the width and height of the element include the padding and border, so the total size of the element is 200px + 20px*2 + 10px*2 = 260px by 100px + 20px*2 + 10px*2 = 140px. If we set box-sizing: content-box, the width and height of the element would only include the content area, and the total size would be 200px by 100px.