在兩個跨度之間添加間距

對於下面的代碼，我希望在「折扣」和$ 500之間添加間距。 I 不要想要添加額外的分標籤。這是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>

來源

2013-08-27 gbs

如果我理解你correclty你想要的跨度是在單獨的行，但不是必須使用 標籤。

默認情況下是內嵌塊元素。給它的display: block;

基於評論相關的代碼更新屬性：

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

來源

2013-08-27 20:33:42 kunalbhat

添加填充，以一個或兩個空間他們甚至相隔。 –

我希望他們分開行，所以我有
。現在我想增加一些間距，但不想再添加
。 – gbs

當然，我在這種情況下增加了保證金。根據您的需要，該值可以是任何您想要的值。 – kunalbhat

不同於

或<div>（它們是塊級元素），是內嵌元素。

根據Spec：

margin-top，margin-bottom性質對非替換inline元素沒有影響。

爲了使用上/下邊距屬性，則需要更改元素的display type到block或inline-block（或任何其他margin適用於）。

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

這裏是JSBin Demo

，或者簡單設置line-height財產上的表單元格來代替：

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

來源

2013-08-27 20:34:47

因爲我看到有就是把「打折」換行和「500美元」，我認爲它將在不同的線路上打印，並獲得更多的空間，但不是全新的線路，您可以使用line-height。

在你的CSS：

span#lblDiscount { 
    line-height:180% 
}

嘗試標準線高度約120-200％，它會把你的兩條線之間的間距的一個很好的量。希望這可以幫助。

來源

2013-08-27 20:39:49 taronish4

-1

對於第二個跨度，您可以使用pading左：someValue中

例子：....

來源

2017-04-19 09:19:55

示例： .. .. –

在兩個跨度之間添加間距

回答

相關問題