 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson-30.
In our previous lesson we have studied CSS padding property.
Today, we will study CSS margin property.
CSS margin property
CSS margin property is used to define margin for an element in the web page. Once we define margin for an element another element cannot occupy that space. Note that padding is the space between actual content of an element and its border whereas margin is the space occupied by that element outside the border. That means, padding defines the space inside the border and margin is the space outside the border.
If we specify margin of 10vw for an element, then any other element will be displayed only after a distance of 10vw from the border of that element.
CSS margin property has rules very similar to padding property rules.
We can specify margins in a single CSS property as follows:
margin: value1 value2 value3 value4;
Here value1 is the margin for top, value2 is the margin for right side, value3 is for bottom, and value4 is the margin for left side.
If we specify only one value in margin property then it is applied to all four sides. For example,
margin: 1vw;
If we mention three values for margins then first value is applied for top, second value is for right and left, and the value3 is for bottom.
If we mention two values then first value is for top and bottom, and the second value is applied for right and left.
CSS margin-top property, CSS margin-right property, CSS margin-bottom property, and CSS margin-left property
Individual CSS margin properties can be used. They are margin-top, margin-right, margin-bottom, and margin-left. For example,
margin-top: 2 vw;
Now we will write CSS margin property in our script. Open a new Notepad file and copy all code from lesson-29 in this file. In the style for #header insert following lines:
margin-bottom: 5vw;
margin-top: 5vw;
margin-left: 5vw;
margin-right: 5vw;
Save this file as "Lesson-30" and "Lesson-30.html". See the following figure. Click on this figure for PDF file of source code.
 |
| Figure 30-1. CSS Margin property |
Now double click on HTML document and see the output.
 |
| Figure 30-2. CSS Margin property |
Margin is displayed around the border of heading. In this web page we can see a border, padding, and margin properties. Understand them clearly.
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.
We can use either absolute or relative units of measurements for specifying padding. If we mention percentage in the value then value is calculated as percentage of width of the element.
If
margin: auto;
is given then width of element is deducted from the width of viewport and remaining space is divided into right and left margins. Thus, element is perfectly centered.
Important Points
1. CSS margin property is used to define space outside the border of an element. This area is occupied by the element, therefore, no other element can be displayed in this area.
2. We can use separate margin properties for top, bottom, right, and left.
3. We can use absolute measurements, relative measurement, percentage, or auto for values of margin property.
Lesson-29 Lesson-31
