Creating a user-friendly website is about achieving the ideal balance between design aesthetics and functionality — you can't have one without the other.

In order to customize your website's design, you'll need to make changes to the style sheet file. Cascading Style Sheets (CSS) is the coding language used to affect design.

You can use CSS to add animations to your site to solve interface challenges and otherwise delight your visitors. Building a great user experience isn't always this glamorous, but every aspect of design is important — even something as seemingly unimportant as proper spacing between elements.

Thus, an important aspect of website customization involves using CSS padding to give various website elements room to breathe.

Free Intro Guide to HTML & CSS [Download Now]

Hypertext Markup Language (HTML) is the coding language you use to define elements on a page. CSS gives you full control over all aspects of an element's style, and in this case: padding. They both contribute to the look and functionality of a website.

In terms of CSS, you can set the padding (spacing) around each side of an element — top, right, bottom, left — using lengths (like pixels) or percentages. Note that you can't use negative values, as that's not how padding works.

The default value of all padding properties is 0, which means that any elements that can be changed with CSS start with no extra spacing. You must add padding in order for it to exist within an element.

Here's how padding properties are specified for each side of an element:

  • padding-top: [amount];
  • padding-right: [amount];
  • padding-bottom: [amount];
  • padding-left: [amount];

Spacing values — that is, how much padding you want to provide — can take on three different forms:

  • Length in px, pt, cm, etc.
  • Percentage (%).
  • Inherit — this specifies that the CSS padding property should be inherited from the parent element.

W3Schools shares this visual explanation of the CSS box model:

Visual representation of the CSS box model.

Source

And here's a diagram of the various padding properties for reference:

Visual representation of the various padding properties.

Image Source

CSS Padding Shorthand

Like most functions that need to be repeated often, there is a shorthand method to apply CSS padding.

The long-form method involves applying padding to each side of the element, individually:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

In other words, defining long-form CSS padding means a lot of extra lines of code.

This system works fine but it isn't efficient. The shorthand version can save quite a bit of time if you have a lot of elements on your website. It empowers you to define one, several, or all aspects of padding within just one line of code.

Here's how it works:

In a situation where you only provide one padding value, it is assumed that all four sides of the element should be padded at that value, such as:

padding: 10px;

If there are two padding values present, they are understood as the left and right padding, such as:

padding: 2px 4px;

If there are three values, the first one corresponds to top padding, the second value is for both left and right padding, and the third one refers to the bottom padding, such as:

padding: 15px 10px 15px;

Finally, if there are four values present, they represent, in order, top, right, bottom, and left padding:

padding: 15px 10px 15px 10px;

While the long-form method might seem easier to recall, because it's so straightforward, it helps to understand the directional relevance of the shorthand version. Specifically, when you're defining four values, they match up with the top of an element then clockwise, according to the order they're written in CSS.

Text Padding CSS

Why bother with text padding? It comes back to the user experience.

It's hard to read large blocks of text without decent spacing. In fact, it's overwhelming to the point that it might make someone leave the website they're browsing.

Text padding adds much-needed room for creating a great reading experience. Done well, it's hardly noticeable, which is ideal – you want your visitors to focus on your calls-to-action.

With text padding, all you have to do is set a value for each side of the element or use one padding value if you want all sides of your text element to be uniform.

 

 

p.text {

border: 3px solid blue;

text-align: center;

padding: 35px;

}

Text padding CSS example.

Image Padding CSS

You can add padding to create space between your images, text, and other content, which helps prevent your website from looking cluttered.

An image without the proper amount of padding added through CSS will look something like this:

Image before CSS padding example.

We can assume that the person who built this website left the padding around the image at the default setting of 0.

As you can see, the website looks significantly better when padding is added around the image. It creates the necessary space to prevent elements from feeling cluttered.

Image after CSS padding example.

To add CSS padding to all images, locate the image element in the website's style sheet — img. Then, add in a value for padding.

 

 

 img {

padding: 10px;

}

Padding Color CSS

To add color to CSS padding, you can use the background-clip property and the box-shadow property.

The background-clip function allows you to define how far the background extends into the element.

It's possible to set the color so that the background extends to the outer edge of the border.

 

 

 {

border: 3px dashed black;

padding: 15px;

background: pink;

background-clip: border-box;

}

CSS padding color options.

You can also set the color to stop on the inside of the border.

 

 

 

#example2 {

border: 3px dashed black;

padding: 15px;

background: pink;

background-clip: padding-box;

}

CSS padding color example.

Another option is to create empty space between the background and the border.

This also lets you add color to the padding since the background color doesn't fully extend past the text element.

This is where you can use the box-shadow property.

 

 

 

#example3 {

border: 3px dashed black;

padding: 15px;

background: pink;

background-clip: content-box;

}

CSS padding with color.

There are four values for the box-shadow: 0 0 0 15px.

The first three zeros define h-shadow (horizontal shadow), v-shadow (vertical-shadow), and blur. For the function to work, each of these things must all have a value — even if that value is zero.

The last value — 15px — is the value for the solid shadow, which extends inward to meet the content box. The value of the shadow must be the same as the padding.

 

 

 

#example4 {

border: 3px dashed black;

padding: 15px;

background: pink;

background-clip: content-box;

box-shadow: inset 0 0 0 15px lightblue;

}

 

CSS padding with two colors.

You can achieve a similar effect by using the linear-gradient property.

The two linear-gradient properties can be set for the background, defining the content-box and padding-box, respectively.

 

 

 

#example5 {

border: 3px dashed black;

padding: 15px;

background: linear-gradient(0deg, yellow, yellow),

linear-gradient(0deg, blue, blue);

background-clip: content-box, padding-box;

}

CSS padding with gradients.

CSS Negative Padding

Negative numbers don't work when specifying CSS padding because they go against the purpose of this aspect of CSS.

In the textile industry, the word "padding" refers to the lining or filling that's stuffed inside a material.

This is the same scenario for CSS padding properties.

CSS negative padding visual.

At the default padding of 0, the content's edge is the same as the border edge. The content would overlap with the borders if it was possible to set the padding to a negative number.

 

 

 

.example {

font-size: 16px;

padding: 8px 0;

border: 1px solid blue;

}

This is how the resulting element would appear in a browser:

CSS padding border example.

Assuming it was possible to use a negative value, you would write something like this:

 

 

 

.example {

padding: 8px 0 -8px 0;

border: 1px solid blue;

}

And this is how the resulting element would appear in a browser:

CSS padding border examples.

How to Apply CSS Padding Around Your Website's Various Elements

Don't underestimate the importance of padding around text and image elements on your website. Even the smallest changes can significantly affect your website's aesthetic and user experience.

However, with a solid understanding of CSS, you'll be able to ensure that your website will look exactly the way you want — no matter what browser people are using.

New Call-to-action

 css introduction

Originally published Feb 19, 2020 12:02:40 PM, updated May 03 2020

Topics:

CSS Animation