fbpx
April 6, 2020
css padding
CSS

CSS PADDING | Learn How To Add Beautiful List To Web Page Using CSS

In this tutorial we will be discussing about CSS padding which covers how to style and add padding to your web document. In our previous tutorial we discussed about CSS list and how you can style them on your web document. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS LIST | Learn How To Add Beautiful List To Web Page Using CSS

CSS PADDING

CSS allows us to add padding to our web document. Padding is the space between the element content and the border of the element. We can structure our web content properly using the padding property. There are different padding properties we can style using CSS and they include:

  • The padding-bottom – use to add space between the content bottom and its border
  • The padding-top – use to add space between the content top and its border
  • The padding-left – use to add space between the content left and its border
  • The padding-right – use to add space between the content right and its border
  • The padding – This is used to add spaces between the four corners of the element content and its border

The padding-bottom property

The padding bottom is used to add space between the element content bottom and its border. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Illustration of padding bottom property</title>
</head>
<body>

   <p style="border: solid 1px; padding-bottom: 10px;"> 
      This is a paragraph showing the bottom padding 
   </p>
</body>
   
</html>

Result

Illustration of padding bottom property

This is a paragraph showing the bottom padding

The padding-top property

This property is used to add space between the top of the content element and the element border. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Illustration of padding top property</title>
</head>
<body>

   <p style="border: solid 1px; padding-top: 10px;"> 
      This is a paragraph showing the top padding 
   </p>
</body>
   
</html>

Result

Illustration of padding top property

This is a paragraph showing the top padding

The padding-left property

Developers need to sometimes add spaces at the left between the element content and the border of the element. We can achieve this using the padding left property as shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Illustration of padding left property</title>
</head>
<body>

   <p style="border: solid 1px; padding-left: 20px; width: 38%;"> 
      This is a paragraph showing the left padding 
   </p>
</body>
   
</html>

Result

Illustration of padding left property

This is a paragraph showing the left padding

The padding-right property

The padding right property allows us to add spaces at the right between the element content and the element border as shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Illustration of padding right property</title>
</head>
<body>

   <p style="border: solid 1px; padding-right: 30px; width: 70%; "> 
      This is a paragraph showing the right padding 
   </p>
</body>
   
</html>

Result

Illustration of padding right property

This is a paragraph showing the right padding

The padding property

This is used to add spaces between the four corners of the element content and its border. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Illustration of padding property</title>
</head>
<body>

   <p style="border: solid 1px; padding: 20px; width: 50%; "> 
      This is a paragraph showing the effect of padding property
   </p>
</body>
   
</html>

Result

Illustration of padding property

This is a paragraph showing the effect of padding property

CSS PADDING VS MARGIN

CSS padding is different from CSS margin. CSS padding adds spaces between the element content and the element border while CSS margin adds spaces between the element and another element or between the element and the web page boundaries

conclusion

The CSS padding properties listed above are needed when styling your element padding on a web page. A good understanding of this padding properties will enable you make good web padding formatting and structure. Lets move on to the next topic on CSS CURSORS

Leave a Reply

Your email address will not be published. Required fields are marked *