Html 跨文本填充增加跨度大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5878315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
span text padding increase span size
提问by CliffC
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?
在我看来，跨度的总宽度根据填充大小而增加。有没有办法防止跨度大小增加并将文本向右填充？
回答by robx
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 是否真的在那里有一个空间，但它不应该在那里。也可能是另一个问题。你有
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/
这是一个例子。如果你不太明白，请摆弄它。http://jsfiddle.net/robx/GaMpq/
回答by ryanmarc
Use margin instead of padding. Padding is space applied inside the element, margin is space applied outside the element.
使用边距代替填充。填充是应用在元素内部的空间，边距是应用在元素外部的空间。
回答by thomasafine
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:
您可以使用 after 选择器添加一些内容并为其设置样式：
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.
我认为这不能作为内联样式完成，它必须在 <style> 块或外部文件中完成。
回答by thomasafine
The easiest way to do it:
最简单的方法：
span {
width: 80%;//Or some different value
}
