18

以下のコードでは、「Discount」と $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>
4

6 に答える 6

16

スパンを別々の行に配置したいのですが、<br>タグを使用する必要はありません。

<span>デフォルトではインライン要素です。のプロパティを与えるdisplay: block;

コメントに基づく関連コードで更新:

.labelForTextbox {
  ...
  display: block;
  margin-bottom: 10px; /** Change this value to whatever you wish **/
}
于 2013-08-27T20:33:42.900 に答える
1

「Discount」と「$500」を別の行に配置する改行があることがわかったので、それは別の行に印刷され、もう少しスペースを確保するために、使用できる新しい行全体ではないと仮定しますline-height。

あなたのCSSで：

span#lblDiscount {
  line-height:180%
}

通常の行の高さの約 120 ～ 200% を試してみると、2 つの行の間に十分な間隔ができます。お役に立てれば。

于 2013-08-27T20:39:49.080 に答える