Flyers · Compared
Margin vs padding vs white space
Margin is the space outside an element that pushes other things away from it. Padding is the space inside an element, between its edge and its content. White space is every empty area on a page. On a flyer, the page margin frames the design, and padding keeps text off the edge of a coloured box.
The three terms get used interchangeably in feedback, which makes a request like add more space surprisingly hard to act on. Naming the right one tells whoever is editing exactly which gap to change and what else will move.
Nuwan Madhusanka · Co-founder
5 min read · Published
| Margin | Padding | White space | |
|---|---|---|---|
| Where the space is | Outside a box or around the page content | Inside a box, between its edge and its content | Any empty area in the design |
| What it separates | An element from its neighbours or the page edge | Content from its own border or background | Everything from everything else |
| Flyer example | The clear strip between the text and the edge of the sheet | The gap between a price and the edge of its coloured panel | Space around the headline that makes it stand out |
| Changing it | Moves the element relative to others | Grows or shrinks the box around the same content | A result of margins, padding and how much content there is |
| Takes on the background colour | No, it is transparent | Yes, it is inside the box | Shows the page or panel behind it |
Terms borrowed from the box model
Print designers talked about margins long before the web, meaning the space between the text block and the edge of the page. Web development made the distinction sharper. MDN's guide to the CSS box model describes every element as a set of layers: the content, then padding around it, then a border, then margin outside the border. The CSS Box Model specification from the CSS Working Group defines those same padding and margin areas. The vocabulary is now used in all kinds of design work, including flyers, because it describes a real difference. Padding belongs to a box and travels with it. Margin belongs to the relationship between a box and whatever is next to it.
Seeing the difference on a flyer
Picture an A4 flyer with a coloured panel in the lower half holding a price and a date. The strip of plain paper between the panel and the edge of the sheet is margin, part of the page margin. The space between the words inside the panel and the panel's own edge is padding, and it is filled with the panel's colour. The gap between the panel and the photograph above it is also margin, this time between two elements. The open space around the headline, the calm area that makes it the first thing noticed, is white space, which may be made of margins, padding and simply having less content. Change the padding and the panel grows; change the margin and the panel moves.
Why each one matters
Margins protect content and set the tone. A generous page margin makes a flyer feel considered and survives an imprecise print trim, while a tight one makes it feel crowded and puts text at risk. Practical Typography makes a related point about documents: page margins have the greatest effect on line length, because they fix the maximum width of the text block. Padding is about legibility inside shapes. Text jammed against the edge of a button, badge or panel looks cramped and is harder to read, even when the overall page has plenty of space. White space is about hierarchy. The more space around an element, the more important it appears, which is why a single headline surrounded by space outweighs a larger one in a busy corner.
Common mistakes
The most common is inconsistent padding: one panel with generous space inside, another with text almost touching its edge, which makes a design look assembled from different sources. The second is using margin where padding was meant, moving a box away from its neighbours when the problem was text crowding its own border. The third is filling every gap because empty space looks wasted; on a flyer, white space is what lets a reader find the offer in two seconds. The fourth is setting page margins too narrow for print, so trimming cuts into content. The last is judging spacing only at full screen zoom, when a printed A4 sheet at arm's length shows cramped padding far more clearly.
Spacing in the flyer builder
The flyer builder has no margin, padding or spacing fields and no guides, grid or snapping. Space is controlled by where boxes sit and how large they are: each element has eight resize handles and can be nudged 1 pixel with an arrow key, or 10 with Shift held. In practice, margin is adjusted by moving a box and padding by resizing the panel behind the text or shrinking the text box inside it. A library design comes with its spacing worked out, so the least risky approach is to change the words and pictures without dragging boxes toward the edges, and to shorten copy rather than squeeze the space around it. On the A4 canvas at 150 DPI, 5 millimetres is about 30 pixels, a useful minimum for both page margins and the padding inside panels.
Questions people ask
Is margin inside or outside the border?
Outside. In the box model the order from the centre outward is content, padding, border and then margin. Padding sits inside the border and shares the element's background, while margin sits outside it and is transparent, showing whatever is behind the element.
What does white space mean in design?
White space, or negative space, is any area of a layout without text or images, whatever its colour. A dark poster has white space too. It includes margins, gutters, padding and the gaps between lines. Used well it groups related items, separates unrelated ones and directs attention.
How much padding should a button or badge have?
Enough that the text clearly sits inside the shape, typically at least half the height of the letters on each side and more horizontally than vertically. On a printed flyer, badges and price tags need more padding than on screen because they are seen at a glance and often at a distance.
What are margins called in print?
Print uses head for the top margin, foot for the bottom, outside or fore edge for the edge away from the binding, and inside or gutter for the edge at the binding. On a single sheet flyer these are usually just called the page margins, and they should be at least as wide as the printer's safe area.
Do margins collapse in print like they do in CSS?
No. Margin collapsing, where vertical margins between two blocks combine into the larger of the two, is a CSS layout rule for web pages. In print layout software and on a flyer canvas, the space between two elements is simply the distance you place between them.
How do I explain spacing changes in feedback?
Name the element and the side, and say which kind of space: more padding inside the green price panel, or more margin between the photo and the headline. Giving a rough measurement, such as double it or about 5 millimetres, removes guesswork and saves a round of edits.
Make one with flyers
The button opens the generator with this use case already described. Change the wording to match your own.
Create a flyer with OneCraftRelated questions
- What is a gutter in design?What is a gutter in design: the space between columns, or the inner margin where pages meet at the binding. Column gutters, binding gutters and fold gutters.
- What is the safe area in print?What is the safe area in print: the zone inside the trim line where text and logos will not be cut off. Typical distances, how it relates to trim and bleed.
- What is trim size?What is trim size: the finished size of a printed piece after cutting. How it differs from bleed size and the safe area, with the numbers for A4 and A5 flyers.
Written and checked by the OneCraft team. Last checked .