对于下面的代码,我想在"折扣"和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">$500</span>
</td>
</tr>
</table>
</body>
</html>
小智 16
如果要在 html 中添加间距，也可以使用。
如果将其中三个放在文本之前，它将添加 3 个空格。
例如：
<label> <span>Test</span></label>
如果我理解你的意思,你希望跨度在不同的行上,但不必使用<br>标记.
<span>默认情况下是内联元素.给它一个属性display: block;
根据评论更新相关代码:
.labelForTextbox {
...
display: block;
margin-bottom: 10px; /** Change this value to whatever you wish **/
}
与<div>or <p>（它们是块级元素）不同，<span>是一个内联元素。
根据规范：
margin-top,margin-bottom属性对未替换的内联元素没有影响。
为了使用顶部/底部边距属性，您需要将元素的显示类型更改为block或inline-block（或任何其他margin适用的）。
span {
display: inline-block; /* change the display type */
margin: 10px 0; /* apply the needed vertical margins */
}
这是JSBin 演示
或者，只需line-height在表格单元格上设置属性：
td { /* change the selector to select your specific td */
line-height: 1.5; /* <-- set a line-height */
}
对于第二个跨度，您可以使用 pading-left:somevalue
例子 ： <span>..</span><span style="padding-left:4px">..</span>