Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

White Space (or Negative Space), Margins and Paddings

One of the most important yet often ignored design principles is the use of white or blank space. White space is sometimes referred to as negative.

Failing to allow some amount of blank space can leave your design looking overcrowded and confusing, ultimately drowning viewers with too much information.

White space is your number one go-to for separating and organizing the elements in your design. No one wants to spend time making sense of a design.

Great use of white space can provide multiple benefits for your design, including:

  • Giving the viewer’s eyes a place to rest and a path to travel through the design
  • Separating your layout into sections (the flip side of this is proximity – reducing space to place related items close together – also an aspect of good spacing)
  • Isolating focal points
  • Creating a modern and premium look and feel. Most luxury brands use plenty of white space in their design and minimal amount of text to create a premium look.

There are several types of white space with different implications to design.

The first one is called micro white space.

Micro White Space

When we are talking about micro whitespace we refer to the small space between graphic elements as letters, text lines, paragraphs, buttons and icons.

Micro white space is usually used in paragraphs to improve the content legibility and help the viewer to read faster the text with better comprehension thanks to adding margins to it as if the text goes outside the paragraph’ it will make it harder to read for the viewer.

The second type of white space is called macro white space.

Macro White Space

Macro white space in graphic design refers to the space between bigger graphic elements of the design composition as text columns and graphics.

Unlike Micro White Space, macro white space acts like a big picture white space helping as a container of the overall design as it is used as a major design layout element to emphasize different parts of the design composition.

The third type of white space is called active white space.

Active White Space

Active White Space refers to the space added in a design layout intentionally to create more focus on specific parts of the design or content from the design, it’s called active white space as the main function of it it’s to be noticed and create emphasis on specific elements.

The fourth and last type of white space is passive white space.

Passive White Space

On other hand, passive white space is added in a more organic way between words, lines or the blank space around a logo design, and in most cases it goes unnoticed as the main function of the passive white space is to increase readability and comprehension of the design.

As a designer, mastering white space usage is the foundation of your design craft. It is also a telltale sign whether someone is a professional or amateur designer. Because white space is heavily relied on observed design judgment, it is natural to struggle with it as a beginner. A great way to improve and practice your white space usage is by developing a habit to observe great design; learn from them; practice on your own and get lots of feedback.

Margins vs. Paddings

In web design, there are two terminology related to white space that are similar but different. They are margins and paddings.

Margin is an element’s personal space — how much distance the element wants to keep with other elements around it.

Padding is how much an element is away from itself — how much distance an element wants to keep with the elements inside it.

To make it simpler, think of padding as the clothing you wear in a winter day. In order to keep yourself warm, you would have at least some “padding” or layers as we commonly call it.

Margin is the space between the outer layer of your clothing to another person who is standing near you. In order to keep ourselves comfortable, we all need some “personal space”. It’s the same in digital design – in order to make different elements stand out, we need to provide margins between them.

Both margins and paddings are used to create gaps around elements, but they differ in their method of creating that gap.

Margin accommodates the gap by pushing adjacent elements away from it, while Padding accommodates the gap by either growing its own size or by shrinking the size of content inside it.

For example, a button usually consists of two sub-elements – a rectangular box in the background layer and a text layer in the front. The space between the text and the edge of the rectangular box is padding. The space between the edge of the rectangular box and any other elements surround is called margins.

In front-end development, paddings and margins are used to structure the layout of the page and assist with element stylings.

There is no distinction between paddings and margins in design programs, but the difference is important in front-end development, which is why designers should be aware of the definitions of these two white space concepts when communicating with developers.

When to use paddings vs. margins?

So when should a developer use padding vs. margins?

Use padding when:

  • You don’t want your content to touch the edges of the invisible container around your elements, like this text block. Even if there is no visible box or divider around the element, there is still one that is invisible in the code.
  • You don’t want elements inside two adjacent elements to touch. For example, if you have two colored boxes that are next to each other with no gaps, which is a common design pattern, there needs to be padding inside each colored box in order to separate the text.
  • You want to increase the size of an element. For example, if you have a button initially like the one on the left side but want to make it bigger without changing the size of the text.

Use margin when:

  • You want to have some space around an element, or you don’t want the element to touch other elements around it. Typically, developers will apply margins to separate two adjacent sections on a website.
Scroll to Top