css 在两个跨距之间添加间距

hm2xizp9  于 2023-01-03  发布在  其他
关注(0)|答案(7)|浏览(333)

对于下面的代码,我想在“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>
ibps3vxo

ibps3vxo1#

如果你想在html中添加间距,你也可以使用。

&nbsp;

如果你在你的文本前放三个这样的空格,它会增加3白色。
例如:

<label>&nbsp;<span>Test</span></label>
xam8gpfp

xam8gpfp2#

如果我理解正确的话,您希望跨距在单独的行上,但不必使用<br>标记。
默认情况下<span>是一个行内元素。给予它一个属性display: block;

根据备注更新了相关代码:

.labelForTextbox {
  ...
  display: block;
  margin-bottom: 10px; /** Change this value to whatever you wish **/
}
vwhgwdsa

vwhgwdsa3#

<div><p>(它们是块级元素)不同,<span>是一个内联元素。
根据质量标准:
margin-topmargin-bottom属性对未替换的行内元素没有影响。
为了使用顶部/底部边距属性,您需要将元素的display type更改为blockinline-block(或者其他margin适用的属性)。

span {
    display: inline-block; /* change the display type           */
    margin: 10px 0;        /* apply the needed vertical margins */
}

这是**JSBin Demo**
或者,只需在table-cell上设置line-height属性即可:

td { /* change the selector to select your specific td */
    line-height: 1.5; /* <-- set a line-height */
}
uubf1zoe

uubf1zoe4#

对于第二个范围,可以使用padding-left:somevalue
示例:<span>..</span><span style="padding-left:4px">..</span>

wbrvyc0a

wbrvyc0a5#

因为我看到有一个换行符把“Discount”和“$500”放在不同的行上,所以我假设它会打印在不同的行上,为了获得更多的空间,但不是一个完整的新行,您可以使用line-height
在您的CSS中:

span#lblDiscount {
  line-height:180%
}

尝试正常行高的120-200%,这样可以在两行之间留出足够的间距。希望这对你有帮助。

2izufjch

2izufjch6#

另一种解决方案:

span::after {
  content: ' ';
}

这会在任何span后面添加一个空格(或者你想要的任何东西),你也可以将它与:last-child或者css兄弟+选择器结合起来,只为元素之间添加这个空格。

fdbelqdn

fdbelqdn7#

默认情况下<span>是一个内联元素,我们可以使用display: block css属性来改变它,这样就可以给予<br>标签的效果,而不用手动添加它,也不会使html变得混乱。

span {
  display: block;
}

如果希望添加间距而不是新行,则可以在两个跨距之间添加&nbsp;html entity

<span>Hello,</span>
&nbsp;
<span>World!</span>

相关问题