Layout principles

How pages are laid out: the layers a page is built from, and one rule for space that keeps everything aligned. The same pattern on ntb.no and in IBM's Carbon Design System.

ContentPaddingMarginVisible edge (background, border, picture)Column line

Four layers, one job each

A page is a stack of sections. Each layer does one thing and knows nothing about the others: a section doesn’t know about width, a container doesn’t know about space above and below.

Section · rhythm

Container · 1200 px at most, centred

Cell · 8 columns · text

Cell · 4 · beside it

Row · 12 columns, 32 px gutter

A section holds a container; the container holds a row of 12 columns; cells span columns and hold the content. Text spans at most 8; the other 4 are for things beside it.

Layer	Job	Values	ntb.no
Section	Space above and below	16 px padding	.content-module
Container	Width	1200 px at most, centred, 16 px sides	.grid-container
Row	Columns	12 columns, 32 px gutter	.grid-x
Cell	Where content goes	Text 8, beside it 4	.cell

There is no “band”. A band is a section with a background.

One unit: half a gutter

The gutter between columns is 32 px. Its half, 16 px, is the only unit of space. Every box owns half a gutter on each side. Two neighbours’ halves add up to the gutter.

16 + 16 = 32 px

Two blocks of text. Neither has a visible edge, so each one's padding is its half, and together they make the 32 px gutter.

Visible edges: padding inside, margin outside

A box has a visible edge when it has a background, a border or is a picture. Then its padding becomes the space between the edge and its content, and the space to its neighbours disappears. It has to come back as margin outside the edge. This is the usual mistake: a box gets a background and ends up touching its neighbours.

16 + 16 = 32 px

Do.16 px padding inside the colour, 16 px margin outside it. The next block's content is 32 px from the edge, the same as between any two blocks.

16 px

Don’t.No margin. The colour's edge is only 16 px from the next block's content, and the two look stuck together.

Between	Distance	Made from
Content and neighbouring content	32 px	16 padding + 16 padding
A visible edge and its own content	16 px	Padding
A visible edge and whatever is next to it	32 px	16 margin + 16

The same holds vertically: a section with a background gets padding inside and margin above and below. Text never touches the edge of a colour.

Boxes among text hang

A single box with a visible edge among text (an example, a code block, a dense table, a picture grid) hangs half a gutter out on both sides. Its own padding then puts its content back on the column line, in line with the text around it. Text itself never hangs.

hangs 16

Do.The box hangs 16 px into the gutter. Its content starts on the column line, like the text above.

16 off the line

Don’t.The box's edge is on the column line, so its content starts 16 px further in than the text above.

Boxes side by side are the exception: if they hung into the gutter between them, they would touch. Their edges stay on the column lines and their content is inset by their padding (ntb.no’s cards, Carbon’s wide mode).

32 px

Do.Cards keep their edges on the column lines: a full 32 px gutter between them.

0 px: they touch

Don’t.Hung cards eat the gutter from both sides and touch.

Width

Text never gets wider than 8 of the 12 columns; it fills the span it is in. The other 4 columns hold things beside it: a note, a fact box, a contact card. Only dense content that gets better with width (data tables, picture grids, wide diagrams) gets a fluid container with no max width. The grid is centred with equal space on both sides.

Container · fixed, centred

Container · fluid, for dense content

Above: a fixed container, centred, text in 8 columns and a note in 4. Below: a fluid container for a dense table.

Borders and alignment

A border is a visible edge, so everything above applies. But a border also takes space, and that causes two problems of its own. Drawn at 4×: a 1 px line is 4 px wide.

A border pushes the content off the line

A hung box with 16 px padding and a 1 px border has its content at 17 px from its edge: one line-width off the column line. In our own docs layout sample the example box’s text measured 49 px from the sidebar against 48 px for the text above it.

1 px off the line

Don’t.Border plus 16 px padding: the content starts 1 px right of the column line.

1 + 15 = 16

Do.Take the line out of the padding: 1 px border + 15 px padding = 16 px.

16, line drawn inside

Do.Or draw the line as an outline pulled inside the edge: it takes no space, and it is drawn on top, so backgrounds inside the box can't cover it.

The outline is the simpler fix: the padding stays 16 px whatever the line’s width, and current browsers draw outlines round rounded corners. In Tailwind: outline-1 -outline-offset-1 instead of border. An inset box shadow also takes no space, but it is drawn under the box’s children, so a table header’s background hides it.

Neighbouring borders double up

Boxes with borders and no gap between them (a condensed grid, table cells, a segmented control) draw two lines where they meet: a 2 px line between boxes with 1 px edges.

2 px: doubled

Don’t.Each box draws its own line: 2 px where two meet.

1 px, shared

Do.Share the line: each box after the first overlaps the previous one by the line's width (or the boxes sit 1 px apart on a line-coloured background, Carbon's condensed grid).

Docs pages

The article keeps a full gutter (32 px) from the sidebar and the contents column, both visible edges.
The contents column is always reserved from 1280 px up, even on pages without headings, and the scroll area reserves the scrollbar’s space, so nothing moves between pages.

Sources

Source	What it gave
ntb.no, measured 2026-10-08	The four layers and their classes; a 1200 px container in 12 columns; text in 8 columns, side content in 4; sections with a background get margin outside; cards keep their edges on the column lines.
Carbon 2x Grid	16 px unit and 32 px gutter for text-heavy content; boxes hang into the gutter or keep their edge on the column line; type never hangs; a 1 px gap on a line-coloured background for condensed grids.

Carbon is the preferred reference for design systems in general (see AGENTS.md › Design sources); ntb.no stays the visual source for NTB.