CSS Padding property
The CSS padding property of CSS sets the padding space on all sides of an HTML element. The space between the content of the element and border of the element is known as padding area.by using padding property, we can create a good look and feel in a web page. Now a days almost all the web pages utilize the padding property of CSS.
Individual Sides Padding
In CSS, we can set the padding of every side(top, right, bottom, and left) of an element by using the following properties:
- padding-top
- padding-right
- padding-bottom
- padding-left
The value of the padding is specified by following values
auto : set by browser
length : specified a margin in pt,cm, px etc
% : % of the width of a container
inherit : value inherit from its parent element.
Example
DIV
{
border-style:solid;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 80px;
padding-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Outline Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.</div>
</body>
</html>
Shorthand Property
The shorten syntax of the code is possible
p {
padding: 10px 20px 30px 40px;
}
this is same as
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
Four form of shortcut process of padding
- padding:10px 20px 30px 40px [ top right bottom left ]
- padding:10px 20px 30px [top (right&left) bottom ]
- padding:10px 20px [(top&bottom) (right&left)]
- padding:10px[ all margin ]
Note 1: Padding property value always set a (+Ve) value, (0) is also allowed.
Note 2: If we do not add any units(cm, px, %, etc.) then the value is treated as 0 (zero) by the browser.
Note 3: We can combine percentage values and fixed values in the CSS padding property.
Note 4: If we provide a value as a percentage, it is relative to the width of the containing block.
If we write the following code
.box
{
padding: 20px;
width: 400px;
}
Now if we create a div using the class box then the actual width of the div will be 400 + 20 (left) + 20 (right) = 440px.
