8

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 seems 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?

4 Answers 4

11

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/

8
  • tried changing that but seems the padding is still increasing the total span size
    – CliffC
    Commented May 4, 2011 at 4:09
  • decrease padding and add margin instead. Padding increase inside your span element, while margin increase space outside of your span element.
    – robx
    Commented May 4, 2011 at 4:10
  • 1
    I made a sample if you need to see. If it works now then it could just be because of that space you had between padding- right:50px;
    – robx
    Commented May 4, 2011 at 4:20
  • not sure what i did wrong but i tried this width:100px;margin-right:50px but still there is no margin between the span border and the text
    – CliffC
    Commented May 4, 2011 at 4:23
  • 1
    yes that would work. Had it been a <p> element rather than a span, i'd have recommended using text-indent to push as a real indent per the paragraph.
    – robx
    Commented May 4, 2011 at 7:45
3

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

0
0

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.

0

The easiest way to do it:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.