html - 在两个跨度之间添加间距

Question

对于下面的代码，我想在“折扣”和 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>

score 21 · Accepted Answer

如果要在 html 中添加间距，也可以使用。

&nbsp;

如果您将其中三个放在文本之前，它将添加 3 个空格。

例如：

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

score 16 · Accepted Answer

如果我理解您的正确理解，您希望跨度位于不同的行上，但不必使用 标签。

默认情况下是一个内联元素。给它一个属性display: block;

根据评论更新了相关代码：

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

score 7 · Accepted Answer

与<div>or （它们是块级元素）不同，它是一个内联元素。

根据规格：

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 */
}

score 5 · Accepted Answer

对于第二个跨度，您可以使用 pading-left:somevalue

例子：....

score 1 · Accepted Answer

由于我看到有一个换行符将“折扣”和“$ 500”放在不同的行上，我假设它会打印在不同的行上，并获得更多空间但不是一个全新的行，您可以使用line-height.

在你的 CSS 中：

span#lblDiscount {
  line-height:180%
}

尝试大约 120-200% 的正常线高，它会在两条线之间留出相当大的间距。希望这可以帮助。

score 0 · Accepted Answer

另一种解决方案：

span::after {
  content: ' ';
}

span这会在任何（或任何你想要的）后面添加一个空格。您也可以将它与:last-child或 css 同级+选择器结合使用，以便仅将其添加到元素之间。

html - 在两个跨度之间添加间距

6 回答 6

Related

Reference