Learn How CSS Padding Works

If you’ve read CSS tutorials in the past, you probably know how to create a box with a border using CSS. In this part of the CSS tutorials series, you will learn why CSS padding is important and how to create and customize it around your object.

What Is CSS padding?

A coding class often first focuses on CSS padding and its importance. Padding defines the inner part of the box and creates space around the edge of the content while remaining inside the edges of the box. The area is bounded, or contained, by the edge of the padding, so it will not affect outside elements. The padding can also extend the content inside the element to include the padding, which allows everything to move together cohesively. The dimensions of this are “padding-box height” and “padding-box width.”

CSS padding is important when you are working with borders or outlines. Imagine if you had a block of text that you wanted to differentiate. You might choose to add a border around the text box, however, without the white space created by padding, the border would touch the edges of your text making it very hard to read.

CSS Padding vs. Margins

In other CSS Margin tutorials, you may read about margins and wonder how they differ from padding. Think of margins like personal space between the elements on a page that involves how they relate to each other. On the other hand, padding involves the space between objects inside an element.

As the default setting, padding will add gaps inside an element by increasing the element’s size. However, if you would rather the objects inside the element shrink, you can use the syntax “box-sizing: border-box.” 

Setting the Values of CSS Padding

Use percentages or lengths to set the value of your padding, keeping in mind that a padding value can’t be negative and an unset value will reset to zero. This is known as the default, or initial, value of the property. Here are some basic ways to set CSS padding:

• padding: 2em; — This will create an equal amount of padding around your entire object. This is ideal if you have a square shape.
• padding: 0; — This will not create any padding. Your object will be right up against your border.
• padding: 5% 0; — This will create padding that has space at the top of your object but not much around the sides.
• padding: 15px 40px 35px 0; — This will create padding that appears closer to one side of the border than the other.

The amount of padding you decide to add will depend on your object. Using the phrases “padding-bottom,” “padding-top,” “padding-right” and “padding-left” can help you customize the values, but you can also use shorthand for your padding.

Syntax for CSS Padding

Using the right syntax for your CSS padding is crucial to ensure that it will work properly. You can customize your padding in a variety of ways using the following syntax. Notice that you can use either percentages or the unit “em,” which measures the object in nominal inches or points.

You can use these values to customize the way that your object is offset from the border by using one or more value to set the CSS property. You must use either a <percentage> or a <length> to set these. You may remember from past CSS tutorials that you cannot use a negative value. The lowest value that you can use is zero, which is the default setting.

If you apply one value, it will be applied to each of the four sides of the CSS padding. If you use two values, then your first value will apply to the top and the bottom of your object; the second value will apply to the right and left of your object. 

If you use three values, the first value will apply to the top, the next value will apply to the right and left sides and the third value will apply to the bottom. Finally, if you use four values in your CSS padding, then the values will apply clockwise, starting with the top.

When you use a length for your value (e.g., “3em”), the CSS padding will have a fixed value no matter the sizes of other objects on the page. On the other hand, using a percentage for the value will set the padding relative to the width of the block containing it.

Example of CSS Padding Syntax

Let’s work with two examples of CSS padding so you can see how it works and learn how setting different values affects the final outcome. In the first example, you will create just a little bit of padding. Here is the HTML:

The result will be that your sentence will appear in a block of blue color, with some extra space surrounding the sentence so it doesn’t look too crowded. However, let’s see what happens if we increase the size of the padding. Start with some HTML. 

And now, we will create the CSS padding.

After you have created this CSS padding, you will notice that there is a lot more space around your object.

Closing Thoughts

If you take a coding class, it’s likely that you’ll learn how to work with CSS borders. It’s important to know how to create a space around the items inside the border to ensure that your finished objects are aesthetically pleasing. Remember that you should be practicing your CSS skills through this and other CSS tutorials, as using all these elements together will ensure you are well on your way toward becoming a proficient in coding.

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.