What is `box-sizing: border-box`?

`box-sizing: border-box` is a CSS property that forces the browser to include padding and border within an element's declared width and height. By default, padding and borders are ADDED to the width of your element, but `border-box` forces them INSIDE the width you set, making layout math much easier.

Why does my margin collapse?

Margin collapsing is a CSS specification rule where vertical margins between adjacent block-level elements combine into a single margin. The browser takes the larger of the two margins and uses that single value, rather than mathematically adding them together.

Can a margin be negative?

Yes, negative margins are completely valid in CSS. While padding cannot be negative, you can use negative margins (e.g., `margin-top: -20px;`) to intentionally pull elements closer together or deliberately overlap DOM nodes.

What is `box-sizing: border-box`?

`box-sizing: border-box` is a CSS property that forces the browser to include padding and border within an element's declared width and height. By default, padding and borders are ADDED to the width of your element, but `border-box` forces them INSIDE the width you set, making layout math much easier.

Why does my margin collapse?

Margin collapsing is a CSS specification rule where vertical margins between adjacent block-level elements combine into a single margin. The browser takes the larger of the two margins and uses that single value, rather than mathematically adding them together.

Can a margin be negative?

Yes, negative margins are completely valid in CSS. While padding cannot be negative, you can use negative margins (e.g., `margin-top: -20px;`) to intentionally pull elements closer together or deliberately overlap DOM nodes.

CSS MASTER CLASS /// VISUAL ENGINEERING /// LAYOUT DESIGN /// ANIMATION LAB /// CSS MASTER CLASS /// VISUAL ENGINEERING ///

⚡ Total XP: 0|💻 css XP: 0

Box Model in CSS3: Styling & Design

Learn about the CSS Box Model in this comprehensive tutorial. Master the physics of layout. Learn the four layers of the box, discover the critical difference between content-box and border-box, and master the clockwise shorthand syntax.

LOADING ENGINE...

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Box Model Physics

The core geometric engine of CSS. Master the mathematical interaction between content, padding, borders, and margins to build indestructible layouts.

The CSS Box Model is the core engine of web layout. Every element on a page is a rectangular box, and mastering how these boxes are sized and spaced is essential for professional design.

1The Physical Layer

An element's size is the sum of its parts.

→Content: Where your text and images live.
→Padding: The 'bubble wrap' inside the box. It separates content from the border and shares the element's background color.
→Border: The physical edge of the box.
→Margin: The 'social distancing' area. It pushes other elements away and is always transparent.

2The Sizing Fix

Calculating total width can be a nightmare in the default 'content-box' model.

→content-box: Total Width = width + padding-left + padding-right + border-left + border-right.
→border-box: Total Width = width. The padding and border are automatically subtracted from the content area. This is why professional developers apply * { box-sizing: border-box; } to every project as a first step.

3Common Bugs & Solutions

Bug: Horizontal Scrollbar appears on 100% width elements.

*Solution:* The element is set to width: 100% but has padding or borders added, causing it to exceed the viewport width under the default content-box sizing. Apply box-sizing: border-box; to the element to force the padding inward.

?Frequently Asked Questions

Pascual Vila

Frontend Instructor // Code Syllabus

Lesson Glossary

[01]box model

The CSS Box Model is the standard computational system for sizing and spacing elements, sequentially comprising the content, padding, border, and margin layers.

Code Preview

Box Model

[02]content-box

The default CSS content-box sizing algorithm forces padding and border values to be added outward, undesirably increasing the element's declared width and height.

Code Preview

box-sizing: content-box

[03]border-box

The border-box sizing algorithm forces padding and borders to consume internal space, guaranteeing the element's declared width and height remain absolute and unbreakable.

Code Preview

box-sizing: border-box

[04]padding

The CSS padding property generates internal cushion space situated between an element's core content area and its structural border.

Code Preview

padding

[05]margin

The CSS margin property generates transparent external space around an element's border, designed specifically to physically push adjacent DOM elements away.

Code Preview

margin

[06]shorthand

CSS shorthand properties provide a compact syntax to declare multiple directional values (top, right, bottom, left) in a single performant line of code.

Code Preview