 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome again to KTL's HTML and CSS tutorial. Today we are going to study lesson-29.
In our previous lesson, we have studied CSS border properties.
Today we will study about CSS padding properties.
CSS padding property
CSS padding property is used to specify the distance between actual contents of an element and its border. Some space is left between the element and its border as per value given in the padding property.
We can specify padding for all sides in only one property. Its syntax is as follows:
padding: value1 value2 value3 value4;
Here value1 gives the distance of top border, value2 is for right border, value3 is for bottom, and value4 is for left. If we specify only one value then this value is applied to all four sides. For example,
padding: 0.5vw;
In this example, border is displayed at a distance of 0.5vw from contents of the element.
Let us write this in our script. Open a new Notepad file. Copy all code from lesson-28-2 in this file. Insert the following line in the style for #header.
padding: 0.5vw;
Save this file as "Lesson-29" and "Lesson-29.html". Click on the following figure for PDF file of source code.
 |
| Figure 29-1. CSS padding property |
Double click on the HTML document. See the output.
 |
| Figure 29-2. CSS padding property |
Border of the heading is displayed at some distance from its actual content. When you study lesson-31, click on the figure in which output is shown, a web page is displayed. We have shown this output in that lesson because you can observe both padding and margin in that web page, so that you will clearly observe the difference between padding and margin. Our next lesson is about CSS margin property.
Remember: If we give three values for padding property then first value is for top border, second value is for right and left sides, and third value is for bottom side.
If we specify two values in padding property then first value is applied to top and bottom borders and second value s applied for right and left borders.
CSS padding-top property, CSS padding-right property, CSS padding-bottom property, CSS padding-left property
We can also use individual properties for padding-top, padding-right, padding-bottom, and padding-left. For example,
padding-top: 1vw;
We can specify padding in any unit of measurement for length like px, cm, mm, vw, vw and so on.
Important Points
1. CSS padding property is used to define space between actual contents of an element and its borders.
2. We can use individual padding properties for top, bottom, right, and/or left.
03. We can specify only one value, two values, three values, or four values padding property.
Lesson-28 Lesson-30
