COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

CSS Box Sizing

The CSS box-sizing property controls how the total width and height of an element are calculated.

This property becomes especially important when an element has a defined width or height together with padding and borders.

Basic Syntax

selector {
    box-sizing: value;
}

Main Box Sizing Values

content-box

The width and height apply to the content area. Padding and border are added outside the specified width and height.

border-box

The specified width and height include the content, padding, and border.

Box Sizing Diagram

content-box

Width = 220px
Padding + Border are added outside

border-box

Width = 220px
Padding + Border are included

Simple Explanation

Suppose you create a box with width: 300px.

If you use content-box, the 300px represents only the content width. Padding and border are then added to that size.

If you use border-box, the complete width remains 300px. The content, padding, and border fit inside that 300px.

This makes border-box very useful when you want predictable element dimensions.

Example 1: content-box

With content-box, the specified width and height apply only to the content area.

.box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid blue;
    background-color: lightblue;

    box-sizing: content-box;
}

Output

Content Box

The specified width is 300px.

Padding adds 40px horizontally and the border adds 10px horizontally.

Therefore, the total horizontal size becomes 350px.

Example 2: border-box

With border-box, the specified width and height include the padding and border.

.box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid green;
    background-color: lightgreen;

    box-sizing: border-box;
}

Output

Border Box

The complete width remains 300px.

The padding and border are included inside the specified width.

This means the outer size does not increase when padding or border is added.

content-box vs border-box

Feature	content-box	border-box
Width includes content	Yes	Yes
Width includes padding	No	Yes
Width includes border	No	Yes
Outer size remains predictable	No	Yes

Practical Example

The border-box model is commonly useful when creating cards, forms, navigation components, and responsive layouts.

* {
    box-sizing: border-box;
}

This rule applies border-box sizing to all elements.

It helps make width calculations easier because padding and borders are included inside the declared width and height.

Important: The default value of the box-sizing property is content-box. The border-box value is often useful when you want the declared width and height to include padding and border.

Summary

The CSS box-sizing property controls how an element's width and height are calculated. With content-box, padding and border are added outside the declared dimensions. With border-box, padding and border are included within the declared dimensions. Understanding this difference is important when creating predictable layouts.

← Previous: Border Radius

Next: Box Shadow →