Html 在两个跨度之间添加间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18474834/
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
Add spacing between two spans
提问by gbs
For the code below I want add spacing between "Discount" and $500. I don'twant to add additional break tag. Here's the sample on jsbin.
对于下面的代码，我想在“折扣”和 500 美元之间添加间距。我不希望添加额外的休息标签。这是jsbin上的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Spacing Test</title>
<style type="text/css">
.labelReadOnlyTB {
font-size: 16px;
font-family: Arial;
padding: 1px;
}
.labelForTextbox
{
font-weight: bold;
font-size: 12px;
color: #000000;
font-family: Arial;
padding:8px 0px;
margin-bottom:5px;
}
</style>
</head>
<body>
<table>
<tr>
<td style="min-height:45px;vertical-align:top;">
<span id="lblDiscount" class="labelForTextbox">Discount</span>
<br />
<span id="lblValue" class="labelReadOnlyTB">0</span>
</td>
</tr>
</table>
</body>
</html>
回答by kunalbhat
If I understand you correclty you want the spans to be on separate lines, but not have to use the <br>tag.
如果我理解你是正确的，你希望跨度在不同的行上，但不必使用<br>标签。
<span>is by default an inline element. Give it a property of display: block;
<span>默认情况下是内联元素。给它一个属性display: block;
UPDATED with relevant code based on comment:
根据评论更新相关代码：
.labelForTextbox {
...
display: block;
margin-bottom: 10px; /** Change this value to whatever you wish **/
}
回答by Hashem Qolami
Unlike <div>or <p>(which are block-level elements), <span>is an inline element.
与<div>or <p>（它们是块级元素）不同，<span>是一个内联元素。
According to Spec:
根据规范：
margin-top,margin-bottomproperties have no effect on non-replaced inline elements.
margin-top,margin-bottom属性对未替换的内联元素没有影响。
In order to use top/bottom margin properties, you need to change the element's display typeto blockor inline-block(or whatever else marginis applicable to).
为了使用顶部/底部边距属性，您需要将元素的显示类型更改为block或inline-block（或任何其他margin适用的）。
span {
display: inline-block; /* change the display type */
margin: 10px 0; /* apply the needed vertical margins */
}
Here is the JSBin Demo
这是JSBin 演示
Or, Simply set line-heightproperty on the table-cell instead:
或者，只需line-height在表格单元格上设置属性：
td { /* change the selector to select your specific td */
line-height: 1.5; /* <-- set a line-height */
}
回答by tim
If you want to add spacing in html you can also use.
如果要在 html 中添加间距，也可以使用。
If you put three of these before your text, it will add 3 white spaces.
如果将其中三个放在文本之前，它将添加 3 个空格。
for example:
例如：
<label> <span>Test</span></label>
回答by Malatesh Patil
For the second span, you can use pading-left:somevalue
对于第二个跨度，您可以使用 pading-left:somevalue
Example : <span>..</span><span style="padding-left:4px">..</span>
例子 ： <span>..</span><span style="padding-left:4px">..</span>
回答by taronish4
Since I see that there is a newline that puts "Discount" and "$500" on different lines I assume it will print on separate lines, and to get a little more room but not an entire new line you can use line-height.
由于我看到有一个换行符将“Discount”和“$500”放在不同的行上，我假设它会打印在不同的行上，并且为了获得更多空间而不是整个新行，您可以使用line-height.
In your css:
在你的 css 中：
span#lblDiscount {
line-height:180%
}
Try about 120-200% of normal line height and it will put a nice amount of spacing between your two lines. Hope this helps.
尝试大约 120-200% 的正常线高，它会在你的两条线之间放置一个很好的间距。希望这可以帮助。
