Padding

HOW TO

Padding

Guy Woodland

Padding is something that can go wrong very quickly if used wrongly. But the most common use of padding is to create space but why does this matter?

Padding in web design is like adding breathing room to your website. It creates space between the content of an element (text, image, button) and its borders. This space offers several benefits:

Improved Readability
Padding separates paragraphs, headlines, and images, making the content easier to digest and visually appealing. Imagine a website with text crammed to the edges - it would be tiring to read! Padding creates a clear separation between elements, guiding the reader's eye.
Enhanced User Experience
Padding around buttons and clickable elements makes them easier to tap or click, especially on mobile devices. Without padding, users might accidentally click the wrong thing. Sufficient padding ensures a smoother user experience.
Visual Hierarchy and Focus
Strategic use of padding can create a visual hierarchy on your website. By adding more padding to specific elements, you can draw the user's attention to those areas. This is useful for highlighting important calls to action or key information.
Aesthetics and Design
Padding contributes to the overall aesthetics of your website. It can create a clean, modern look and feel, or a more classic and spacious layout. The right amount of padding can make a big difference in the visual impact of your site.

Here's a quick analogy

Think of a page of text like a crowded room. Padding is like arranging the furniture to create breathing space and designated areas for different activities. It makes the room more inviting and functional.

Depending on how you build your sites here are a few ways to add padding:

CSS it might look like this:

padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;

Or if you uses classes it might look like this:

p:50px (this would be padding on all sides)
pl:80px (padding left)
pr:80px (padding right)
pt:80px (padding top)
pb:80px (padding bottom)

Whilst pixels are set all values are converted to REM when published.

Columns

If you use columns in your construction and you can alter the sizing you could for example using a three column column have the centre column containing content set to say 8 units (out of 12) and the left and right columns set to 2 units each with no content. In this instance the left and right columns just become padding.

Here is a screen shot of a website using padding to condense the sentence into a sensible line length. The red areas showing the padding areas.

screen shot of a website page with shorter sentences

Compare with this screen shot
screen shot of a website page with very long sentences

The padding left and right is too small and the text is too long to read.

Typically line length should be approximately 50 to 70 characters. In the first screen shot it is 100 characters which is a bit long but compared to the second screen shot which is 175 characters the second one is much harder to read causing whip lash for the reader or at worst eye/neck strain.

However, for screen readers it doesn't matter as such. But line length does matter for reading and breathing. It is more difficult to read long lines that short and the same for text to speech. Smaller lines are more accessible.

Forest Pathways

HOW TO

Padding

Improved Readability

Enhanced User Experience

Visual Hierarchy and Focus

Aesthetics and Design

Here's a quick analogy

CSS it might look like this:

Or if you uses classes it might look like this:

Columns

12 most common accessibility errors

FONTS

HEADINGS IN MICROSOFT WORD

HEADINGS AND SCREEN READERS

HEADINGS

We can show you how, but why

Navigation in Microsoft Word

html Tags

{{{ title }}}

Links

Partners

Friends

Information