We are independent & ad-supported. We may earn a commission for purchases made through our links.
Advertiser Disclosure
Our website is an independent, advertising-supported platform. We provide our content free of charge to our readers, and to keep it that way, we rely on revenue generated through advertisements and affiliate partnerships. This means that when you click on certain links on our site and make a purchase, we may earn a commission. Learn more.
How We Make Money
We sustain our operations through affiliate commissions and advertising. If you click on an affiliate link and make a purchase, we may receive a commission from the merchant at no additional cost to you. We also display advertisements on our website, which help generate revenue to support our work and keep our content free for readers. Our editorial team operates independently of our advertising and affiliate partnerships to ensure that our content remains unbiased and focused on providing you with the best information and recommendations based on thorough research and honest evaluations. To remain transparent, we’ve provided a list of our current affiliate partners here.
Software

Our Promise to you

Founded in 2002, our company has been a trusted resource for readers seeking informative and engaging content. Our dedication to quality remains unwavering—and will never change. We follow a strict editorial policy, ensuring that our content is authored by highly qualified professionals and edited by subject matter experts. This guarantees that everything we publish is objective, accurate, and trustworthy.

Over the years, we've refined our approach to cover a wide range of topics, providing readers with reliable and practical advice to enhance their knowledge and skills. That's why millions of readers turn to us each year. Join us in celebrating the joy of learning, guided by standards you can trust.

How do I Create Padding in CSS?

By Tony Hernandez
Updated: May 16, 2024
Views: 8,946
Share

CSS padding allows an HTML coder to set the default padding or dead space outside of an HTML element. The benefit of doing this is that it saves the coder from repeating that padding code for each instance of that element, and more easily creates consistency on the page. The HTML element to be padded can be any number of things, such as a paragraph, a table, or a heading.

To create padding in CSS, you'll first have to identify the HTML element that you want to pad. This element that you want to pad is known as the selector. Then, you'll want to specify the appropriate padding values. There are five different types of padding properties in CSS — one for all four sides of an element at once, and four others for each individual side of the element (e.g., the left side, the right side, the top side or the bottom side). A property that permits the programmer to specify values for all four sides of an HTML element at once is called a shorthand property.

The coding language used to specify one declaration of CSS padding is simply the word “padding.” Following that label, are the relevant "values" of the padding, or, information on the amount of space desired, usually represented either by pixels or a percentage. The padding and the values are written inside curly braces or curly brackets (i.e., "{" and "}"). Preceding all of that is the HTML element to be padded (e.g., "p" for the paragraph or "H2" for level 2 headers).

In terms of how the value is represented, values can be represented in pixels (e.g., 1px or 5px), points (e.g., 1pt or 5pt) or inches (e.g., 1in or 5in), or centimeters (e.g., 1cm or 5cm). Values can also be declared as a percentage of the HTML element being styled. If the value is 50%, for example, the padding will equal half the size of the element.

The following examples, are the HTML code for padding an HTML element by way of values reflected in a percentage and length, respectively. If only one value is assigned, then web browsers will assign this padding to all four sides of the HTML element.

padding:10%;
padding:100px;

Adding more values to the type of padding declaration above will cause web browsers to interpret them a certain way. If two values are assigned, the first will correspond to the top and bottom, while the second corresponds to the left and right. Three values will cause the first to refer to the top, the second to the left and right sides, and the third to the bottom of the HTML element. Assigning the maximum of four values causes the first, second, third, and fourth values to correspond to the top, right, bottom, and left of the HTML element, in that order. When more than one value is provided, they should be separated by spaces and ended with a semi-colon, for example:

padding:10px 20px 10px 20px;

Padding in CSS can be done one side at a time as well. In this regard, there are four more padding properties available. These are padding-top, padding-right, padding-bottom, and padding-left. To create padding in CSS in this more precise manner, you'll need to label the properties with the same syntax as the shorthand declarations as above. Each of these padding properties only takes one value in either length or percentage. For example:

padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;

The following code creates a webpage, declares the padding properties between style tags, and then uses them in a paragraph element specified by the p tag. The text between the /* and the */ are notes to explain the type of padding employed and would not be included in CSS padding code.

<html>
<head>
<style type="text/css">
p.example1 {padding:10px;} /* Short-hand padding for all four sides*/
p.example2 {padding:50px 30px;} /* Short-hand padding for the top and bottom followed by the left and right */
p.example3 {
padding-top:10px;
padding-bottom:20px;
padding-bottom:10px;
padding-left:20px;
} /* individual padding. */
</style>
</head>

<body>
<p class="example1">This text has the same padding on each side. The padding on each side is 10px.</p>
<p class="example2">This text has a top and bottom padding of 50px and a left and right padding of 30px.</p>
<p class=”example3”>This text has a top padding of 10px, a right padding of 20px, a bottom padding of 10px, and a left padding of 20px.</p>
</body>
</html>

In the example above, “example1,” etc., are names assigned to a class, which are then referenced in the paragraphs. The period between the p tag and the class names at the beginning of the code denotes a declaration of a class assigned to a paragraph. Notice the braces after the class declaration enclosing the padding property value assignments.

Though this might seem like a lot of work, it is far less labor intensive than specifying padding for each individual paragraph. You can declare one padding property for the desired element, which in the example above is the p tag, and then reference the class when you use the element between the body tags of the page. If only one type of padding is needed for all paragraphs, you don’t need to use classes at all. Simply use the following code between the style tags, and then code the paragraphs without specifying any class. This code would go between the body tags instead of the code in the above example.

p {padding:10px 20px 10px 20px;}

This CSS padding this would create would affect all paragraphs even though there was no class specified.

Share
EasyTechJunkie is dedicated to providing accurate and trustworthy information. We carefully select reputable sources and employ a rigorous fact-checking process to maintain the highest standards. To learn more about our commitment to accuracy, read our editorial process.
Discussion Comments
Share
https://www.easytechjunkie.com/how-do-i-create-padding-in-css.htm
Copy this link
EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.

EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.