Padding is an important concept in design that refers to the area immediately surrounding the content in what is called the “box model”. The box model determines special relationships between elements and is used when talking about design and layout. Margin is the area immediately surrounding the border between other elements that incorporate the box model.

blog-box-model

Why is it important?

Padding gives the content more or less space between the border and content. When applied correctly, this will provide your user with a sense of breathability, scalability, and increases the legibility of your designs. Without applying padding to your designs, you run the risk of making your content run together and, at best, provide a confusing and disorienting user experience.

No Padding

Padding – None

Padding - Left & Right

Padding – Left & Right

blog-padding-logo-padding

Padding – Top, Bottom, Left, & Right

If the elements in your composition seem a bit congested, try increasing the amount of padding and margin to aid the visibility and legibility of your designs. Your users will thank you.

Frank Sack
Digital Experience Specialist

 

 

Pin It on Pinterest