Expanding text range increases span size

Question

I have the following range

<SPAN style="border:solid;TEXT-ALIGN: right; FONT-STYLE: normal;width:100px; padding-RIGHT: 50px; DISPLAY: inline-block;PADDING-TOP: 3px">hello world</SPAN> 

It seems to me that the overall span width increases the base by the fill size. Is there a way to prevent the span from increasing in size and place the text to the right?

Answer 1

I don't know if your padding-right works with a space, but it should not be. Maybe one more problem. you have

 padding- right:50px 

instead

 padding-right:50px; 

Edit: to increase the space outside your range, rather than increase the range itself, replace:

 padding-right:50px; 

from

 margin-right:50px; 

Here is an example. play with him if you do not quite understand. http://jsfiddle.net/robx/GaMpq/

Answer 2

Use the field instead of filling. Filling is the space applied inside the element, the edge is the space applied outside the element.

Answer 3

Marked or indented, you are still messing with the box model and resizing the actual span. This means that line wrappers will not appear in the right place and may violate valid fields.

You can use the after selector to add some content and style it:

 your_css_class:after { content:" "; word-spacing:1em; } 

I do not think that this can be done as an inline style, it needs to be done in the style of a <style> block or external file.

Answer 4

The easiest way to do this:

 span { width: 80%;//Or some different value }