CSS padding-top

The CSS padding-top property is used to create top padding for specified elements. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .myd{border: 2px solid coral; padding-top: 32px;}
   </style>
</head>
<body>
   
   <div class="myd">
      This is an example of padding-top property in CSS.
   </div>
   
</body>
</html>
Output
This is an example of padding-top property in CSS.

In the above example, the following CSS code:

.myd {border: 2px solid coral; padding-top: 32px;}

targets an HTML element with a class of "myd" and applies two styles to it.

The first style, "border," adds a 2-pixel wide border around the element and changes its color to coral, a shade of orange.

The "padding-top" style adds 32 pixels to the top of the element's content box, which is the area inside the element's border. This increases the distance between the element's top border and the text or other content within it.

When applied to the given HTML code, the result would be a "div" element with a coral-colored border around it and a 32-pixel gap between the top border and the text inside the element.

The padding-top property can be useful for creating space between an element's content and its top border, which can improve the visual clarity and readability of the content. However, it's important to use padding carefully and not overuse it, as excessive padding can make a design look unbalanced or cluttered.

Note: Top padding is the width (height) of the area above the content and below the border of the specified element.

CSS padding-top syntax

The syntax of the padding-top property in CSS is:

padding-top: x;

The value of x should be any of the following:

Note: To learn about padding in detail, refer to its separate tutorial.

Advantages of the padding-top property in CSS

Disadvantages of the padding-top property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!