Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/myscript/public_html/classes/classdb.php on line 42
Top Padding - CSS (HTML) Tutorial

CSS Top Padding

How to create space in the top between border and text?
Top Padding in html using style sheet

Explanation

Property :

Top Padding

Usage:


padding-top: 10px;
padding-top: 10pt;
padding-top: 10%;
padding-top: auto;

Definition:


This will set the top padding 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 margin.

Example 1:


<div style="padding-top: 20px;">testing top padding</div>
Result:

testing top padding

Note: The difference between padding and margin is that padding set values inside the objects scope, while margin moves the whole object away from the nearby object.

Example 2:


<div style="padding-top: 30pt;">testing top padding</div>
Result:

testing top padding


Example 3:


<div style="padding-top: 10%;">testing top padding</div>
Result:

testing top padding


Example 4:


<div style="padding-top: auto;">testing top padding</div>
Result:

testing top padding


Ask Questions

Ask Question