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 element content to its edges)?


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.

Source : Link , Question Author : Yosef Waysman , Answer Author : allcaps

Leave a Comment