css - CSS Padding - Padding Shorthand

A Beginners Introduction to CSS Padding

In HTML, an element’s padding refers to the space around its content area. Understanding how this spacing works and how to manipulate it can help you take better control of your own CSS designs. 

In this short guide, you will learn how to use the CSS padding property to alter that content spacing for HTML elements. Sample images are provided to help guide you through the process. Before you begin, it would be a great idea to get acquainted with the CSS Box Model. If you are not already familiar with it, read up with the post The CSS Box Model: Explained for Beginners.

Where is the Padding?

CSS padding may not be apparent when you look at items on a page. However, when the CSS padding property is applied, it can be easy to see its effects. Remember that the padding is a section that sits between the HTML element content and its borders. 

In the example image below, you can see the padding around the element in orange. The border surrounds it with the margin setting on the outermost edge. Notice how the padding creates extra space within an element, while the margin creates extra space around an element.

This image depicts the CSS Box model and how the CSS padding property fits within it.

You can use the browser inspection option on modern browsers such as Chrome and Firefox to inspect the box model of an element. In the sample CSS code below, a padding value of 20 pixels has been added to a div element on the page.

The inspection option has been used to display the padding effect on the div. You can see it highlighted in purple around the text content. In the next image, the CSS padding value is increased to 50 pixels.

Setting the CSS Padding Property

As shown in the above example, setting the CSS padding property is a rather direct operation. First, you note the element you are working with. Then you state the padding property and its value. This process is detailed in the example image below.

Using the CSS padding property in that form will tell the browser to apply a padding of 10 pixels on all sides of the target HTML element. However, you do not have to apply the padding in a blanket form unless you want to.

The CSS padding property can also be set to the individual element sides as well. To do this you will need to use the appropriate side property you want to manipulate. The available CSS properties you can use are listed below.

  •   padding-top: Sets the padding for the top of the HTML element.   
  •   padding-right: Sets the padding for the right of the HTML element.  
  •   padding-bottom: Sets the padding for the bottom of the HTML element.  
  •   padding-left: Sets the padding for the left of the HTML element.  

The next sample image displays this method in use as well as the page render.

The CSS Padding here has been set on all four sides of an element. The sides are all set individually.

The CSS Padding Shorthand Method

In the interest of a quicker and cleaner stylesheet format, you can also opt to use the shorthand method for the CSS padding property. This method allows you to enter all sides of the CSS padding property on one single line of the stylesheet as opposed to four separate ones.

To use this method, simply call the padding property as you would if applying one broad padding value. However, instead of just setting on value, you can set all four sides. You will enter the values according to the flow of the padding. 

The padding, when four values are specified, follows the clockwise order in the following sequence: 

  1. Top
  2. Right
  3. Bottom
  4. Left

Each direction can have its own value. A single space is all that is needed to separate the values. You do not need to use a comma or other characters to separate them. Note that a semicolon is still required at the end of the last value to signify the end of that property. 

In the sample image below, you can see the shorthand method for the CSS padding property in use. Note that only a single space is required to separate the values. In this example, a few extra spaces were used to better demonstrate each individual property value.

This image details how the css padding property can set all four sides of an element on one line.

While the shorthand property does allow you to use all four sides of the CSS padding property, you are not forced to. If you choose to only use two or three sides of the padding it’s also within the rules and isn’t considered a bad practice. The other unmarked property values are taken as inherent zeros. 

Just remember that by doing it this way, the flow of the padding sides is still in effect. So if you only use two values in the shorthand method, then those two values will start at the top and right values leaving the bottom and left at zero.

For a more direct breakdown of how these values can be applied, take a look at the following details.

If you wanted to apply various padding values to all four sides, you could use this format:

If the padding property is only using three values, it would appear like this:

If the padding property is only assigned two values, it would appear like this:

The CSS padding property has been set using shorthand here. The top and bottom values are 10px while the left and right values are at 15px.

Lastly, If the padding property has one value assigned it would look like this:

In this image the CSS padding property has been set to 20 pixels.

Width and Padding Properties

The last item on this guide deals with the CSS width property. It’s important to understand how the width of an element relates to the padding property. When you alter the width of an HTML element, you are essentially changing its content area. 

When you do define a specific width on an element, the applied padding gets rolled into the math and increases that value. In the example below, a CSS padding value of 40 pixels is applied to the entire element. This means that the left and right padding values are set at 40 pixels. The width of the div element is set to 120 pixels. 

To the browser, this means that the width of 120 will be added to the padding values in effect. This increases the width of the element to 180 pixels as it uses both the left and right padding values for gain.

Here is the same div element again, however with the padding removed from all sides.

You can see that the width has reduced. This is due to the extra 80 pixels of padding no longer being added into the equation. This is why it is important to consider the extra CSS properties you include in an element as it can cause some unforeseen changes to your design plans.

Padding values

While all the examples on this guide have used px (pixel) units for the padding property value, it should be noted that other options are available as well.

It’s possible to mix and match any combination of any measuring units. The CSS padding property can take values in the em, vw, or percentage form if you do not wish to use pixel values.

Additional Items to consider on padding: 

  • The absolute position value does not take padding into consideration.
  • Padding has no auto option while margin does.
  • No negative values are allowed. 
  • % values – refer to the width of the containing block

Building on This Information

Knowing how to use padding on your HTML elements is a wonderful skill to tuck into your CSS toolbox. Yet, there is such a wide wealth of information available that you can just keep digging for even more skills. The great thing about this is that each new CSS skill just empowers all the others in conjunction. 

With this guide now complete, you can move on to a few additional posts to build on what has been presented. An obvious pathway is that of working with div widths directly. The post Beginners Guide to Div Width Properties can help you get a deeper look at how the content area changes with width alterations.

A read on The Pure Basics of the CSS Margin Property provides a look at how the next section of the box model after padding and borders affects overall spacing on the page. Used in combination with width and padding, it can provide clarity on the behavior of element spacing.

A final suggestion is the post-CSS Grid Layout: Lines and Gaps Explained. This read provides a starting point for the topic of CSS grids. Using this information, you can develop a CSS grid container to create and contain your HTML elements. Adding in the above content, you can ensure that all your content is set up just as you intend it to be.

No matter what path or content you choose to learn from, remember to have fun along the way. These skills can provide you with great job opportunities but they also open a lot of creative avenues for you to play with. 

_______________________________________________________________________

There is a world of creative power for you to take advantage of. Take your share with a dive into programming. If you want to advance your career,  take the first steps by learning to code. Having code skills can help succeed by building on your existing CSS and HTML skills. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.

Start Learning Today