CSS Box Model Visualizer - Online Interactive Margin Padding

The CSS Box Model is a fundamental concept that describes how every HTML element is rendered as a rectangular box. It consists of four layers (from inside out): content (the actual text, image, or child elements), padding (space between content and border), border (the visible edge around padding), and margin (space outside the border separating elements). Understanding the box model is essential for precise layout control.

content-box (default): The width and height properties apply only to the content area. Padding and border are added on top of these dimensions, making the total rendered size larger.

border-box: The width and height include content, padding, and border. This makes layout calculations much more intuitive — if you set width: 300px, the entire box (including padding and border) will be 300px wide. Most developers prefer border-box and apply it globally via *, *::before, *::after { box-sizing: border-box; }.

Padding creates space inside the element, between the content and the border. It inherits the element's background color and is part of the clickable area.

Margin creates space outside the element, pushing other elements away. Margins are transparent, do not have background color, and are not part of the clickable area. Margins can also collapse vertically — when two vertical margins meet, they combine into a single margin equal to the larger of the two.

Margin collapse occurs when the vertical margins of two adjacent block-level elements touch. Instead of adding together, the margins collapse into a single margin whose size is the larger of the two. This happens between sibling elements (e.g., <div> stacked vertically) and between parent and child elements when there is no padding, border, or content separating them. Horizontal margins never collapse.

Using box-sizing: border-box globally makes layout math predictable. With content-box, a width: 50% column with padding: 20px actually takes up 50% + 40px, which can break layouts. With border-box, the column stays at exactly 50% with padding subtracted from the content area. This eliminates countless layout bugs and is why frameworks like Bootstrap, Tailwind CSS, and virtually all modern CSS resets enable border-box by default.

Yes! Negative margins pull an element in the opposite direction of a positive margin. A negative margin-top pulls the element upward, potentially overlapping the element above it. Negative margin-left pulls the element leftward. This technique is often used for overlapping effects, centering with absolute positioning, or creating full-bleed layouts. However, negative margins can cause elements to overflow their containers, so use them carefully.