Box Model Visualizer

The CSS box model is a fundamental concept that defines how HTML elements are rendered as rectangular boxes. Every element consists of four concentric layers: the content (where text and images appear), padding (space between content and border), border (the visible edge), and margin (space outside the border that separates elements). Understanding how these layers interact is essential for creating predictable layouts.

Content-box (the default) means width and height apply only to the content area—padding and border add to the total size. For example, a 200px width with 20px padding and 5px border renders as 250px total. Border-box means width and height include content, padding, and border—the content area shrinks to accommodate the extra space. That same 200px width with border-box stays 200px total, with content reduced to 150px. Border-box is generally preferred for easier layout calculations.

This typically happens with content-box sizing (the browser default). If you set width: 300px but also add padding: 20px and border: 5px, the element actually occupies 350px horizontally (300 + 20 + 20 + 5 + 5). Switch to box-sizing: border-box to make the declared dimensions include padding and border, or reduce your content dimensions to account for the extra space.

Margins are not included in an element's declared dimensions with either box-sizing mode. However, margins do contribute to the space the element occupies in the document flow and affect positioning. Collapsing margins (where adjacent vertical margins combine rather than add) can also cause unexpected spacing. The visualizer shows both the element box dimensions and the margin-included outer dimensions separately.

Yes. The visualizer supports individual side controls for margin and padding (top, right, bottom, left). This allows you to create asymmetric spacing, such as larger bottom margins for vertical rhythm or different horizontal padding for visual balance. Border width can also be set per-side, though the tool defaults to uniform borders for clarity.

Use border-box when you want predictable sizing, especially in responsive layouts. It simplifies mental math—you declare 300px width and the element stays 300px regardless of padding changes. Content-box is useful when you need the content area to remain fixed (like an image container) while padding adjusts around it. Most modern CSS frameworks default to border-box for this reason.

Yes. The padding area extends the background of an element. If you set a background-color or background-image, it fills both the content box and padding box. The border sits outside this background, and the margin is always transparent. This is why increasing padding makes colored backgrounds appear larger without changing the content dimensions.

Most browsers show the box model in the Elements panel of DevTools. In Chrome/Edge, select an element and look for the "Computed" tab or the box model diagram in the "Styles" sidebar. Firefox has a similar visualization in the "Layout" panel. These tools show the numeric values for each layer, but our visualizer lets you experiment with values interactively and see changes in real-time before applying them to your code.

Margin collapsing occurs when two adjacent block-level elements have vertical margins that touch. Instead of adding (20px bottom + 30px top = 50px), the larger value wins (30px). This also happens between a parent and child if there is no padding or border separating them. Collapsing does not occur for horizontal margins, floated elements, absolutely positioned elements, or with flex/grid items.

Yes. The visualizer generates ready-to-use CSS based on your configuration. Click the Copy CSS button to copy the complete box model declaration to your clipboard, including width, height, box-sizing, margin, padding, and border properties formatted with proper syntax. Paste directly into your stylesheet or inline styles.