Why CSS Layout Feels Like Physics: Mastering the Box Model and Positioning

Last week I wrote an article titled “Bad CSS Layout May Be Due to Poor Physics” and shared it with the team; many found the concepts overwhelming, so I reorganized the ideas for a clearer second attempt.

Many tools claim to convert design mockups to prototypes, but none can guarantee 100% fidelity.

What prevents two visually identical drafts from being interchangeable? In my view, it’s the differing physical logic between them.

Simply put, converting a design mockup to a prototype requires breaking through the “physical dimension” that separates them.

Differences Between Prototype and Design Mockup

We often rely on our eyes and view the problem from a single angle, mistakenly assuming the two are identical.

Viewing the drafts from a different perspective, akin to real‑world physics, reveals subtle differences.

I think of the design process as painting on a floor where elements only have an overlapping relationship, allowing us to start anywhere without affecting other elements.

In web development, programmers write code on a vertical wall, making the physical logic far more complex.

Because we operate on a wall, all elements are pulled by gravity onto the floor, though large underlying elements can stack.

We could fill the room with water (transparent glass panels) to provide buoyancy, but the elements would float uncontrollably; adding a transparent glass panel between boxes creates a stable arrangement.

By enclosing text in boxes and inserting a transparent glass separator, elements stay in their intended positions.

The situation resembles arranging goods in a warehouse, except the warehouse is filled with water.

We can think of the transparent glass as a shelf and the containers as boxes; adding a colored backboard gives a shelf a background color.

Box Model Analogy

The boxes correspond to the CSS box model; they are essentially the same concept.

The gaps inside and outside a box are like cushioning foam inside a shipping box. The margin and padding values represent the thickness of that foam.

Here’s a quick note on box-sizing : some browsers include border and padding in the width calculation, while others do not—much like buying walnuts with or without shells. Understanding which model the browser uses, or explicitly setting box-sizing , resolves the discrepancy.

Positioning

Following the above logic, how can we achieve the layered effect shown?

We wrap our box with a 3D mesh on the right side, creating the perceived stacking effect.

Using fixed adds two transparent mesh shelves, and fixed positions elements within that mesh.

Many struggle to grasp the relationship between relative , absolute , and fixed . While all use position , relative creates a structure, and absolute and fixed place elements within that structure.

relative creates a 3D mesh; absolute puts an element into the mesh; top , left , and z-index control its position; fixed places the element in a global mesh.

The mesh can be stacked infinitely, like warehouse shelves.

Floating Layout

Switching back to a front‑view, here’s a concrete example of web layout physics.

Placing the text “I love you” in a browser, buoyancy makes it float upward.

In real browsers, text aligns left by default, just as we place items on a shelf from left to right.

The text-align property defaults to left , but can be set to center or right as needed.

To prevent the “foam” from exploding and to simplify adding foam, we place elements inside boxes before putting them on the shelf.

In the browser, block elements act as shelves, so even with buoyancy they stay in place. For text‑wrap effects, we remove the top transparent panel.

Removing the red panel yields the desired layout.

Eliminating the 200px bottom panel shows how float can be used to detach that panel while keeping the box anchored to the shelf.

For a side‑by‑side layout, simply re‑add the removed panels.

Two methods to add panels: one uses fewer boxes but is less flexible; the other adds an extra box for better extensibility.

Besides block elements with shelves, there are inline-block and inline elements (see the display property list). Since they lack shelves, we usually place them inside a block element.

Webnovel’s detail page top uses a similar topographic style; the “webdeveloper” browser extension can display any page’s box structure for visual inspection.

Layouts such as table , flex , and grid share the same principle: they provide a more stable and flexible 3D mesh than floating.

Conclusion

If every element on your page is positioned, the page’s physical rules will closely match those of design tools, enabling plugins like Sketch’s Measure to export an identical prototype. However, most pages rely on the normal document flow, requiring developers to recreate a flow‑based version.

Design tools offer grouping but lack the box‑force relationships inherent to web development; for front‑end developers, everything is a box, making it challenging to design a box‑only world with non‑box tools.

Although many design tools now incorporate box concepts, mastering them remains difficult, and I believe AI will eventually bridge the gap, allowing design drafts to become prototypes directly, signaling the end of manual slicing.

Note: The analogies used here are solely for illustrating CSS layout concepts and do not reflect actual web logic.