• Post category:HTML

How to Add Padding in HTML | Beginner Guide

How to add padding in HTML

What is padding

The area around the content area is known as the padding area. The CSS padding property is used to clear the space around the content area. Padding is the distance between the content and the border or edge of an element. In this article, I will tell you how to add padding to HTML elements.  We can control different padding components independently like padding-top, padding-right, padding-left, and padding-bottom.

how to add padding in HTML

<html>
<head>
<title>padding</title>
</head>
<style type="text/css">
div{
border: 2px solid black;
padding: 5px;
margin: 10px;
}
</style>
<body>
<div>PADDING</div>
</body>
</html>

Output:

 how to add padding in html

The above code contains the text “PADDING” inside a div element. In CSS style, We have added border, padding, and margin property to that div and given value to it. Now, you can easily observe the difference in padding, margin, and border. The green color inside the border is the padding. As we have given 5px value for padding,so padding is set to 5px. If we use padding only space will be generated as in the above output.

Leave a Reply