Padding HTML elements provide a better and smoother user experience from the design point of view. HTML elements can be padded by using CSS styling. In this tutorial, we will learn how to pad with CSS for different or all sides of the HTML element.

CSS padding Syntax

The HTML padding is provided by the padding CSS attribute. We can use the padding attribute as separately or inside the HTML element style attribute.

padding: PADDING_VALUES;

`padding` is the attribute name that can take single or multiple PADDING_VALUES.
`PADDING_VALUES` can be single or multiple values up to 4. All different count of values will have different padding implementation which will be explained below example.

Padding with Single Value (top/right/bottom/left)

We will start with simple steps where we will provide a single value to the padding CSS attribute where this value will be used for all 4 sides padding length.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 30px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 70px;
}

</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

Padding with 4 Values (top,right,bottom,left)

We can also provide 4 values for each side of the HTML element padding value. In this example, we will provide padding values 10px 20px 30px 40px and 50px 70px 90px 110px.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 10px 20px 30px 40px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 50px 70px 90px 110px;
}

</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

Padding with 3 Values (top, left/right,bottom)

We can also provide 3 values where the first value for top padding, the second value for right and left padding and the third value for the bottom padding.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 10px 20px 30px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 50px 70px 90px;
}

</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

Padding with 2 Values

When we provide 2 values to the padding CSS attribute the first value will be used for top and bottom sides and the second value will be used for right and left sides padding.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 10px 30px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 50px 90px;
}

</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

Padding with Percentage Value Type

Up to now, we have used the px which is pixel short form for padding values. We can also use the percentage where the parent element sizes percentage is used for padding.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 5%;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 10%;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

Padding with em Font Size

Another padding size unit is em which is related to the font size. 1 em is equal to a one letter size.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 1em;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 3em;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

Using Multiple Units For Single Padding

We have learned that we can use different units like px,%, em in order to set padding sizes. We can use all of these padding units in a single padding example.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red;
  padding: 10px 20% 2em;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 30px 40% 4em;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>

Padding As Inline CSS Inside HTML Element Style Attribute

We can also use CSS inline attribute features which are used with HTML style attribute. Below we will set a single value for padding as inline CSS.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
}
</style>
</head>
<body>

<p class="ex1" style="padding:40px;">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2" style="padding:80px;">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>

Padding As Inline CSS Inside HTML Element Style Attribute

Padding For Top Side

CSS also provides specific side padding attributes. padding-top is used for only padding for the top side. padding-top CSS attribute can be also used with padding and other padding attributes that will be explained below.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding-top: 40px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding-top: 60px;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>

Padding For Right Side

We can pad only for the right side with the padding-right CSS attribute like below.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding-right: 40px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding-right: 60px;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>

Padding For Bottom Side

We can use padding-bottom in order to pad for only the bottom side.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding-bottom: 40px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding-bottom: 60px;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>

Padding For Left Side

We can use padding-left CSS attribute in order to set HTML element left side padding value.

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding-left: 40px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding-left: 60px;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>

HTML Padding with CSS “padding” Attribute