span text padding increase span size

I have the following span

<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 s开发者_开发知识库eems to me the total width of the span is increasing base on the padding size. Is there a way to prevent the span size from increasing and pad the text to the right?

---

Don't know if your padding-right actually works with a space there, but it shouldn't be there. Could be another problem as well. you have

padding- right:50px

instead of

padding-right:50px;

Edit: to increase space outside of your span rather than increasing the span itself replace:

padding-right:50px;

with

margin-right:50px;

Here is an example. fiddle with it if you don't quite understand. http://jsfiddle.net/robx/GaMpq/

---

Use margin instead of padding. Padding is space applied inside the element, margin is space applied outside the element.

---

With either margin or padding, you're still messing with the box model and altering the actual size of the span. This means that the line wraps will not occur in the proper place, and it can disrupt justified margins.

You can use the after selector to add a bit of content and style it:

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

I don't think that can be done as inline styling, it has to be done in a <style> block or an external file.

---

The easiest way to do it:

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