CSS artefact is employed to specifies space} between the skin content space and within the border area. The artefact is definitely mirrored by the background color of the desired box model. Actually, speaking once you specify a box the artefact has totally different four sides of a part namely: the padding-right, padding-left, padding-bottom.
The general Syntax of CSS artefact are:-
body
{
padding: size in px or percentage;
// or padding: length||percentage||inherit;
}Properties of CSS artefact
1: Padding-top:- This sets the artefact at the highest of part in an exceedingly box and therefore the price is laid out in terms of PX and share.
2: Padding- Left:- This sets artefact at the left of part in an exceedingly box.
3: Padding- Right:- This sets artefact at the correct of part in an exceedingly box.
4: Padding-Bottom:- This sets artefact at all-time low of part in an exceedingly box.
Padding: prime, Bottom, Left, Right
Example:-
padding with Single price
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Padding all side</title>
<style type="text/css">
p{
padding:40px;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<p>Padding with single value on all side</p>
</body>
</html>Output:-
- Padding-Top
Code:-
<!DOCTYPR html>
<html>
<head>
<title>Padding-top side</title>
<style type= “text/css”>
p{
padding-top: 40px;
background-color : skyblue;
}
</style>
</head>
<body>
<h1>gurukulzone SRCS</h1>
<p>padding from top side</p>
</body>
</html>
Output:-
- Padding-Bottom
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Padding-bottom side</title>
<style type="text/css">
p{
padding-bottom:40px;
background-color:green;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<p>Padding from bottom side</p>
</body>
</html>Output:-
- Padding-Left
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Padding-left side</title>
<style type=”text/css”>
p{
padding-left:40px;
background-color: red;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<p>Padding from left side</p>
</body>
</html>
Output:-
- Padding-Right
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Padding-right side</title>
<style type=”text/css”>
p{
padding-right:40px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<p>Padding from right side</p>
</body>
</html>
Output:-
