<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
border: 1px solid black;
width: 200px;
}
div:nth-child(3){
padding: 50px;
}
div:nth-child(5){
padding: 50px 25px;
}
div:nth-child(7){
padding: 50px 25px 10px;
}
div:nth-child(9){
padding: 50px 25px 10px 5px;
}
</style>
</head>
<body>
<h1>CSS padding Property</h1>
<h2>padding: 50px;</h2>
<div>
all four padding are 50px.
</div>
<h2>padding: 50px 25px;</h2>
<div>
top and bottom padding are 50px, right and left padding are 25px.
</div>
<h2>padding: 50px 25px 10px;</h2>
<div>
top padding is 50px, right and left padding are 25px, bottom padding is 10px.
</div>
<h2>padding: 50px 25px 10px 5px;</h2>
<div>
top padding is 50px, right padding is 25px, bottom padding is 10px, left padding is 5px.
</div>
</body>
</html>