对于下面的代码,我想在“Discount”和$500之间添加空格。我不想添加额外的break标记。
<!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>
7条答案
按热度按时间ibps3vxo1#
如果你想在html中添加间距,你也可以使用。
如果你在你的文本前放三个这样的空格,它会增加3白色。
例如:
xam8gpfp2#
如果我理解正确的话,您希望跨距在单独的行上,但不必使用
<br>
标记。默认情况下
<span>
是一个行内元素。给予它一个属性display: block;
根据备注更新了相关代码:
vwhgwdsa3#
与
<div>
或<p>
(它们是块级元素)不同,<span>
是一个内联元素。根据质量标准:
margin-top
、margin-bottom
属性对未替换的行内元素没有影响。为了使用顶部/底部边距属性,您需要将元素的display type更改为
block
或inline-block
(或者其他margin
适用的属性)。这是**JSBin Demo**
或者,只需在table-cell上设置
line-height
属性即可:uubf1zoe4#
对于第二个范围,可以使用padding-left:somevalue
示例:
<span>..</span><span style="padding-left:4px">..</span>
wbrvyc0a5#
因为我看到有一个换行符把“Discount”和“$500”放在不同的行上,所以我假设它会打印在不同的行上,为了获得更多的空间,但不是一个完整的新行,您可以使用
line-height
。在您的CSS中:
尝试正常行高的120-200%,这样可以在两行之间留出足够的间距。希望这对你有帮助。
2izufjch6#
另一种解决方案:
这会在任何
span
后面添加一个空格(或者你想要的任何东西),你也可以将它与:last-child
或者css兄弟+
选择器结合起来,只为元素之间添加这个空格。fdbelqdn7#
默认情况下
<span>
是一个内联元素,我们可以使用display: block
css属性来改变它,这样就可以给予<br>
标签的效果,而不用手动添加它,也不会使html变得混乱。如果希望添加间距而不是新行,则可以在两个跨距之间添加
html entity