To add space between HTML element border and its content. CSS also allows to set padding of specific sides like top, right, bottom, left. Do not use negative values for padding.
padding-top
To add spaces from top border of HTML element & its content.
<html>
<head>
<style type="text/css">
#mydiv{
border: 1px solid black;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="mydiv">
Padding top example
</div>
</body>
</html>padding-left
To add spaces from left border of HTML element & its content.
<html>
<head>
<style type="text/css">
#mydiv{
border: 1px solid black;
padding-left: 20px;
}
</style>
</head>
<body>
<div id="mydiv">
Padding left example
</div>
</body>
</html>padding-right
To add spaces from right border of HTML element & its content.
<html>
<head>
<style type="text/css">
#mydiv{
border: 1px solid black;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="mydiv">
Padding right example
</div>
</body>
</html>padding-bottom
To add spaces from bottom border of HTML element & its content.
<html>
<head>
<style type="text/css">
#mydiv{
border: 1px solid black;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div id="mydiv">
Padding bottom example
</div>
</body>
</html>Padding
To apply padding from top, right, bottom, left directions of html elements in a single property, only padding is used.
<html>
<head>
<style type="text/css">
#mydiv{
border: 1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div id="mydiv">
Padding of 20px will be applied, from top, left, bottom, right side.
</div>
</body>
</html>