padding-right not working

Question

I am having code like this

        <div style="background-color: greenyellow; color: black">
        <span style="padding-left:20%">T1</span>
        <span style="padding-right:10%">2</span>
    </div>

currently it is showing like this. here padding right is not working. it should be such that 2 should be having 10% padded from right of this div. Is there any other style tag which can do give such padding from right.

Answer 1

by default, inline elements are rendered left to right aligned, unless you specify float property for them.

That means, in a given horizontal line, first span T1 will be rendered adjacent to the left border of the parent and then span 2 will be rendered adjacent to span T1.

so, your padding-right is never being utilized, as the last span is already far away from right border, unless you make it to move right either by float:right or giving it a margin

try this:

 <div style="background-color: greenyellow; color: black">
        <span style="padding-left:20%">T1</span>
        <span style=" float:right; padding-right:10%;">2</span>
    </div>

see this fiddle