CSS Padding - Changing the Padding of an HTML Element
Description
This command is used to change the size of html padding to the left of an element. This means you can add space to the left of an element between the content of the element and the left border.
padding-left: length;
or
padding-left: percentage;
or
padding-left: inherit;
Note: see also padding, padding-right, padding-top, padding-bottom
Examples for css padding-left
This example is to show how a div looks with a padding-left of 50px. The content of the div is moved to the right by 50px.
test text test text test text test text
<style>
#testnormal { padding-left:50px; border:1px solid black; }
</style>
<div id="testnormal">test text test text test text test text</div>
Give it a go!
This time we use a span instead of a div to wrap the text. Span is an inline element which do not expand to the parent, they wrap their contents only.
test text test text test text test text
<style>
#test { padding-left: 25px; border:1px solid red; }
</style>
<span id="test">test text test text test text test text</span>
Give it a go!
Values for css padding-left
| padding-left |
length
%
inherit
|
Specifies the size of the padding-left. |