CoderTools Web site

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
HTML & CSS Editor with FTP / FTPS

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


Name Values Description
padding-left length
%
inherit
Specifies the size of the padding-left.


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

8/19/2017 6:50:23 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP