In grid-based layouts, should there be any relation between margins (the distance between elements) and padding (the distance between an element content to its edges)?

3 Answers 3


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.


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.


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.

  • 1
    I don't think this advice is very solid, margin and padding have different functionality and shouldn't be arbitrarily chosen based on looks
    – JohnB
    Commented Jul 31, 2014 at 11:57
  • its entirely subjective, based on what you are trying to acheive. Commented Jul 31, 2014 at 12:27
  • 2
    Subjective? I disagree with that statement. The choice to use padding or margin is absolutely objective based on what you are trying to achieve
    – JohnB
    Commented Jul 31, 2014 at 12:46
  • So what you are saying is, even if it looks right, it might be "wrong"... Commented Jul 31, 2014 at 15:58
  • Some rules can't be broken. Like you can't make an image go off-canvas on the right without a horizontal scrollbar. It's the rule of HTML.
    – Aibrean
    Commented Jul 31, 2014 at 18:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.