ADVERTISEMENT
ADVERTISEMENT

CSS padding-top Property

Learn about the CSS padding-top property, its usages, syntax and examples.
Submitted by Shahnail Khan, on March 15, 2022

By the time you come across this property, I am pretty sure you know about padding property. Don't you still know what padding is? No worries. You can check out tutorial on padding property on our website. In this article, we will talk about the padding-top, which is one of the longhand properties of the CSS padding property.

What is CSS padding-top Property?

The padding-top property defines an element's padding (space) from the top. The default value is 0. Almost all browsers support this property.

Syntax:

padding- top: %| length| initial| inherit

Quick overview of the syntax used,

Value Explanation
0 This is the default value.
% Top padding in terms of percentage of the width of an element.
length Top padding in units of length (m, cm, px, pt., etc.)
initial Sets padding-top property to its default value.
inherit The same value of the padding-top property as set in the container (parent) class.

The example given below illustrates CSS padding-top Property

Example 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>padding-top</title>
   </head>
   
   <style>
      .navbar {
      background-color: teal;
      font-size: larger;
      display: flex;
      justify-content: center;
      padding-top: 40px;
      }
      a {
      color: lightblue;
      padding: 20px;
      }
   </style>
   
   <body>
      <div class="navbar">
         <a href="#">Home</a>
         <a href="#">Coding problems</a>
         <a href="#">Tech Articles</a>
         <a href="#">About</a>
         <a href="#">Contact us</a>
      </div>
   </body>
</html>

Output | Before adding padding-top Property:

CSS padding-top Property | Example 1

Output | After adding padding-top Property:

CSS padding-top Property | Example 2

We have created a navbar and styled using CSS. The padding-top property is added. The value is set to 20px, which specifies the top padding of navbar elements.

Example 2:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>padding top</title>
   </head>
   
   <style>
      body {
      background-color: yellowgreen;
      }
      img {
      padding-top: 20%;
      }
   </style>
   
   <body>
      <div class="container">
         <h2> Code like a pro!!</h2>
         <img
            src=" https://static.vecteezy.com/system/resources/thumbnails/000/180/409/small/software_enginner_1-01.png">
      </div>
   </body>
</html>

Output:

CSS padding-top Property | Example 3

We have inserted an image using HTML. We have defined CSS padding-top property in the image only. The value is set to 20%.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.