WordPress Gutenberg For Beginner - Build Catering Website

1. Understanding CSS Units (Measurement System)

CSS units define how big or small something is. They are divided into absolute, relative, and viewport-based units.

1.1 Absolute Unit: px (Pixels)

Pixels are the most basic CSS unit.

• Fixed size

• Does not scale based on screen or parent element

• Very precise but not flexible

Example:

font-size: 16px;

border: 1px solid black;

Use case:

• Borders

• Icons

• Small UI details

1.2 Relative Unit: % (Percentage)

Percentage is relative to the parent element.

• Flexible and responsive

• Common in layout structures

Example:

width: 50%;

This means the element takes 50% of its parent container width.

Use case:

• Layout containers

• Responsive widths

1.3 Relative Unit: em

em is relative to the font size of the parent element.

• Can compound (nested scaling effect)

• Useful but sometimes unpredictable

Example:

padding: 1.5em;

Use case:

• Component-based scaling

• Buttons and UI elements

1.4 Root-Based Unit: rem

rem is relative to the root (html) font size.

• More consistent than em

• Recommended for design systems

Example:

font-size: 1.25rem;

Use case:

• Typography system

• Spacing scale

• Global UI consistency

1.5 Viewport Units: vw and vh

These units are based on the size of the screen.

vw (Viewport Width)

1vw = 1% of screen width

width: 100vw;

vh (Viewport Height)

1vh = 1% of screen height

height: 100vh;

Use case:

• Full-screen sections

• Hero banners

• Responsive typography

1.6 Advanced Viewport Units: vmin and vmax

• vmin = smaller side of viewport

• vmax = larger side of viewport

Example:

font-size: 5vmin;

Use case:

• Responsive typography that adapts automatically

1.7 Grid Unit: fr (Fraction)

Used in CSS Grid to divide space.

Example:

grid-template-columns: 1fr 2fr;

This means:

• First column = 1 part

• Second column = 2 parts

Use case:

• Layout grids

• Dashboard UI

1.8 Typography Unit: ch

Based on character width (width of "0").

Example:

width: 60ch;

Use case:

• Improving text readability

• Blog/article layouts

2. Understanding Spacing in CSS (UI Layout System)

Spacing defines the distance between elements and inside elements. It is one of the most important parts of UI design.

2.1 Margin (External Spacing)

Margin creates space outside an element.

Example:

margin: 20px;

Use case:

• Separating sections

• Creating breathing space between components

2.2 Padding (Internal Spacing)

Padding creates space inside an element.

Example:

padding: 16px;

Use case:

• Buttons

• Cards

• Containers

2.3 Gap (Modern Layout Spacing)

gap is used in Flexbox and Grid.

Example:

display: flex;

gap: 24px;

Advantages:

• Cleaner than margin hacks

• Automatically manages spacing between items

Use case:

• Card layouts

• Navigation menus

• Grid systems

2.4 Column-gap and Row-gap

Used in grid layouts.

column-gap: 20px;

row-gap: 16px;

• column-gap = horizontal spacing

• row-gap = vertical spacing

2.5 Block Spacing (margin-block)

Controls vertical spacing (top and bottom).

margin-block: 24px;

Use case:

• Article sections

• Vertical rhythm in layouts

2.6 Inline Spacing (margin-inline)

Controls horizontal spacing (left and right).

margin-inline: 12px;

Use case:

• Multi-language layouts (LTR/RTL support)

• Modern responsive design

2.7 Logical Padding: padding-block & padding-inline

Modern replacement for directional padding.

padding-block: 20px;

padding-inline: 16px;

Instead of:

padding-top

padding-bottom

padding-left

padding-right

Use case:

• Responsive UI systems

• International layouts

3. Simple Mental Model (Easy Understanding)

Units = “Size”

• px = fixed size

• % = relative to parent

• rem = relative to root

• vw/vh = relative to screen

Spacing = “Distance”

• margin = space outside

• padding = space inside

• gap = space between items

• block/inline = modern logical spacing