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

回答1:

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/

回答2:

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

回答3:

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.

回答4:

The easiest way to do it:

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

来源：https://stackoverflow.com/questions/5878315/span-text-padding-increase-span-size

标签

html

css

padding