The padding property allows you to specify how much space should appear between the content of an element and its border .
There are properties for setting the padding for each side of an element (top, right, bottom, and left).
You can set following padding properties −
padding-top :The padding-top specifies the top padding of an element.
padding-right : The padding-right specifies the right padding of an element.
padding-bottom : The padding-bottom specifies the bottom padding of an element.
padding-left : The padding-left specifies the left padding of an element.
The padding serves as shorthand for the preceding properties.
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
Example : CSS - Paddings
<!DOCTYPE html>
<html>
<head>
<style>
h3{
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<h3>Code Always To Become Best Programmer.</h3>
<p>Code Always <p>
</body>
</html>
When the above code is compiled , it produces the following result.
You can set CSS padding properties inline, internal and external way of using CSS in your HTML page.
