CSS Padding Property | set the paading of a DIV
11-05-2017    224 times
CSS Padding Property

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
Tutorial at home

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>

Tutorial at home

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 ]
Tutorial at home
Tutorial at home

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.

softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post