Question

对于下面的代码，我想在“折扣”和500美元之间添加间距。我不想要添加额外的break标记。这是sample on 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>

Answer 1

如果我理解您的意思，您希望跨度分开，但不必使用 标记。

默认情况下，

是内联元素。给它一个display: block;

的属性

根据评论更新相关代码：

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

Answer 2

与<div>或（块级元素）不同，是内联元素。

根据Spec：

margin-top，margin-bottom属性对未替换的内联元素没有影响。

要使用上/下边距属性，您需要将元素的display type更改为block或inline-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 */
}

Answer 3

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

&nbsp;

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

Answer 4

因为我看到有一个新行将“折扣”和“500美元”放在不同的行上，我认为它会在不同的行上打印，为了获得更多的空间而不是整个新行，你可以使用{{ 1}}。

在你的css中：

line-height

尝试大约120-200％的法线高度，它会在两条线之间留出很大的间距。希望这会有所帮助。

Answer 5

对于第二个范围，您可以使用pading-left：somevalue

示例：....

Answer 6

另一种解决方案：

span::after {
  content: ' ';
}

这会在任何 span（或任何您想要的）后面添加一个空格。您也可以将它与 :last-child 或 css 兄弟 + 选择器结合起来，只为它们之间的元素添加这个。

在两个跨度之间添加间距

6 个答案: