CSS padding_html/css_WEB-ITnose

CSS padding is used to control the inner spacing of div tables. Let’s talk about padding examples below.

CSS padding

Using CSS Padding, you will be able to change the default gaps that appear within various HTML elements (paragraphs, tables, etc.). But first, let's trust our understanding of the definition of filling. A padded space between a component's borders and the content within it.

See the visual representation in the example below. NOTE: The border has been made obvious, for each element, so you may see the effect of padding more easily

p {padding: 15px; border: 1px solid black; } 0px; border: 1px solid red;}

There are several ways to define the CSS padding property. We will tell you every possible way and let you know which method is the best.

CSS Padding:
As you see in the example above, padding can be in a uniform factor. Specifying a value will create a uniform padding for all sides: top, right, bottom, left. Instead of using an exact value, you can also define a percentage to use for padding.

p {padding: 2%; border: 1px solid black; }

h5{padding: 0px; border: 1px solid red;}

CSS padding: padding ( Direction):

Each HTML element actually has 4 different paddings: top, right, bottom, left. It is possible to determine these individual paddings by simply adding the direction suffix to the padding property. For example form: fill(direction). Only one determined direction will leave the other 3 default paddings unchanged.

p { padding-left: 5px; border: 1px solid black; }

h5{
padding-top: 0px;
padding-right: 2px;
padding-bottom : 13px;
padding-left: 21px;
border: 1px solid red;
}

CSS padding: 2 & 4 values ​​

four padding Recharges can be declared at once by specifying two or four values. When using only two values, the first will determine the top and bottom of the padding, while the second will determine the left and right of the padding.

When using the four value fill specification, the corresponding directions are: up, right, down, left. To help you remember what the command is, just remember that it starts at the top and then moves clockwise until it reaches the left. The example below shows partial (2) and complete (4) padding used.

From: http://www.111cn.net/cssdiv/56/f1cad8ffb23e3e668d3d62cff5c4f368.htm