: What should be the relation between margin and padding? In grid-based layouts, should there be any relation between margins (the distance between elements) and padding (the distance between an

@Alves566

No, there is no universal ratio or size for margin and padding. What looks harmonious in design A might be quite peculiar in design B. Off-key elements can be intentional design choices and the intention of the designer. So anything goes. That said...

The common idea is that dissonance distract. Therefore most designs require margins and paddings that go harmonious with other elements. Tips to get a harmonious margin and padding:


Read about golden ratio and Fibonacci sequence.
Look up the Canons of page construction.
Be inspired by the rhythm in and between other page elements like grid
size, page margins, column gutter, line height, etc.
Create your initial layout with gray frames in stead of actual text. This let's you isolate the design challenge, focusing on the design choices at hand. A temporary paragraph style that styles text as gray lines can be helpful.
Look at other publications.


If your logically reasoned margin and padding still feel a bit off (which is perfectly possible because all elements influence each other), than you can create ranges of variations, adjusting a single parameter at the time. Pick the variation that looks right. Saving your variations allows to look back and reflect on the design choices you made. Iterate over all parameters as long as you're not satisfied. In the beginning you can use bigger steps and exaggerate, narrowing down to almost not noticeable fine tuning.

Vote Up Vote Down

@Si6392903

No - If it LOOKS right, it IS right.

You are the designer, rules are there to be broken :-)
If nobody played about, everything would look the same.

Vote Up Vote Down

@Bryan765

No, this is quite dependent on what you're trying to accomplish.

Personally I try to remain with a minimum of 5px padding and 10px margin. But again its down to how you want the page to look.

Sometimes padding will do the job of the margin if the background-color is to touch the neighboring element..

..where-as the margin would push the two background-colors apart.

So this would be again down to how you want the style of the page, in some cases this maybe stricter than others.

Vote Up Vote Down