CoderTools Web site

CSS padding-right - Changing the Padding of an HTML Element

Description



This command is used to change the size of html padding to the right of an element. This means you can add space to the right of an element between the content of the element and the right border.
    padding-right: length;
    or
    padding-right: percentage;
    or
    padding-right: inherit;
Note: see also padding, padding-left, padding-top, padding-bottom
HTML & CSS Editor with FTP / FTPS


Examples for css padding-right


This example is to show how a div looks with a padding-right of 50px. The content of the div is to the left so we dont actually see the padding in a block level element in this situation.

test text test text test text test text
    
    <style>
        #testnormal { padding-right: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. This time we can see that the right of the span has a 25px gap between the end of the content and the right border.

test text test text test text test text
    <style>
        #test { padding-right: 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-right


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


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).

10/17/2017 7:05:16 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP