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
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
| padding-right |
length
%
inherit
|
Specifies the size of the padding-right. |