What is the difference between padding and margin?

In UI design:

  • Padding: The space between an element's content and its border. It controls the internal spacing, affecting the element's size.

  • Margin: The space outside an element's border. It defines the spacing between the element and surrounding elements.

Understanding the distinction:

  • Padding increases the clickable area and affects the element's background.

  • Margin creates space between elements without affecting their size or background.

Proper use of padding and margin ensures clear and accessible layouts. For more on effective spacing, refer to our guide on Grids and Layouts in UI Design.


Margin example on a grid

Similar questions

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.