UI design principle: space

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which describes white space in an interface design?

A The empty area around and between elements, which does not have to be white

B Any part of the screen that is coloured white

2. What is the main purpose of space between elements in a UI?

A To group related items and keep the layout uncluttered

B To make the screen look unfinished so users explore it

3. A form has name, email and phone fields close together, then a larger gap before the Submit button. What does the gap show?

A The Submit button is broken or not related to the form

B The fields are one group and the button is a separate action

4. Which layout best follows the space principle?

A Elements pushed right up against each other and the screen edge

B Margins around the content and padding inside each section

5. A designer fills every gap on a screen with extra buttons, ads and text to use all the room. What is the problem?

A The layout becomes cluttered and harder to read

B The layout becomes easier to scan because it has more content

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1padding: 16px;		Afieldset { margin-bottom: 32px; }
2margin-bottom: 24px;		BEqual spacing everywhere does not group related items. Use smaller gaps within a group and larger gaps between groups.
3Grouping related items: keep fields that belong together close and leave a larger gap before the next group		CAdds empty space inside an element, between its content and its border, so the content is not cramped
4An uncluttered layout: leave white space around text so lines are easy to read		Dp { line-height: 1.5; margin: 12px; }
5button { margin: 0; } /* buttons packed edge to edge */		ENo space between the buttons, so they look crowded and users may click the wrong one. Add a margin or gap between them.
6Same gap between every label, field and section		FAdds empty space outside an element to separate it from the next item below it

Definitions

space

Fill in the Blanks

Complete each line of code by filling in the missing parts.

.card { _______: 16px; }

.card { ______: 24px; }

.form { display: flex; ___: 12px; }

p { ___________: 1.5; }

.page { max-width: 600px; margin: 0 ____; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .card {

B padding: 16px;

C margin-bottom: 24;

D }

Question 2

A .menu (

B display: flex;

C gap: 12px;

D }

Question 3

A h2 {

B margin-bottom 8px;

C }

D p {

E line-height: 1.5;

F }

Question 4

A .group {

B display: flex;

C flex-direction: column;

D gap: 8px,

E }

Question 5

A label {

B margin-bottom: 80px;

C display: block;

D }

Answer Key

UI design principle: space

Section A: Quick Questions

A — The empty area around and between elements, which does not have to be white

A — To group related items and keep the layout uncluttered

B — The fields are one group and the button is a separate action

B — Margins around the content and padding inside each section

A — The layout becomes cluttered and harder to read

Section B: Match the Pairs

padding: 16px; → Adds empty space inside an element, between its content and its border, so the content is not cramped

margin-bottom: 24px; → Adds empty space outside an element to separate it from the next item below it

Grouping related items: keep fields that belong together close and leave a larger gap before the next group → fieldset { margin-bottom: 32px; }

An uncluttered layout: leave white space around text so lines are easy to read → p { line-height: 1.5; margin: 12px; }

button { margin: 0; } /* buttons packed edge to edge */ → No space between the buttons, so they look crowded and users may click the wrong one. Add a margin or gap between them.

Same gap between every label, field and section → Equal spacing everywhere does not group related items. Use smaller gaps within a group and larger gaps between groups.

Section C: Definitions

space — The empty area around and between interface elements, used to group related items, separate unrelated ones and keep a layout uncluttered and easy to read.

Section D: Fill in the Blanks

.card {
  padding: 16px;
}

.card {
  margin: 24px;
}

.form {
  display: flex;
  gap: 12px;
}

p {
  line-height: 1.5;
}

.page {
  max-width: 600px;
  margin: 0 auto;
}

Section E: Spot the Error

C — A spacing value needs a unit. It should be margin-bottom: 24px; so the gap below the card is applied.

A — A CSS rule block opens with a curly brace. It should be .menu { so the gap between menu items is applied.

B — The colon between the property and its value is missing. It should be margin-bottom: 8px; to add space under the heading.

D — A CSS declaration must end with a semicolon, not a comma. It should be gap: 8px; to keep related items close.

B — A label should sit close to its input to show they are related. A huge gap separates them, so use a small value such as 4px.