HIOX CSS (HTML) Tutorial - Background Image Positioning as absolute, relative

Topic

Setting bottom margin in html using style sheet.

Explanation

Property: Bottom Margin

Usage:
margin-bottom: 10px;
margin-bottom: 10pt;
margin-bottom: 10%;
margin-bottom: auto;

Definition:

Many a times we would need to set margin for our objects. This will set the bottom margin of the object.
It takes the following values.
a)pt : You can set values in points. (e.g: 10pt or 100pt).
b)px : You can set values in pixels. (e.g: 10px or 100px).
c)% : You can set values in percentage. (e.g: 10% or 100%).
d)auto : This will set a automatic / default margin.

Example 1:

<div style="margin-bottom: 20px;">testing bottom margin</div>

Result:

testing bottom margin

Note: You can see that the text has moved 20 pixels from bottom line.

Example 2:

<div style="margin-bottom: 30pt;">testing bottom margin</div>

Result:

testing bottom margin

Note: You can see that the text has moved 30 points from bottom line.

Example 3:

<div style="margin-bottom: 10%;">testing bottom margin</div>

Result:

testing bottom margin

Note: You can see that the text has moved 10 percentage from bottom line.

Example 4:

<div style="margin-bottom: auto;">testing bottom margin</div>

Result:

testing bottom margin

CSS Bottom Margin