All geek questions in one place

Add distance between two spans

For the code below, I want to add an interval between "Discount" and $ 500. I do not want to add an extra break tag. Here is a jsbin sample .

<!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
source share
4 answers

If I understand that you agree, you want the gaps to be on separate lines, but you do not need to use the <br> tag.

<span> by default an element of an inline block. Give it a display: block; property display: block;

UPDATED with the appropriate code based on the comment:

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

Unlike <div> or <p> (which are block level elements) <span> is an inline element.

According to Spec :

margin-top , margin-bottom properties do not affect irreplaceable inline elements.

To use the properties of the upper and lower fields, you need to change the display type element to block or inline-block (or regardless of whether margin applicable).

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

Here is the JSBin Demo

Or, just set the line-height in the cell table instead:

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

Since I see that there is a new line that puts "Discount" and "$ 500" on different lines, I assume that it will be printed on separate lines, and to get a little more space, but not a completely new line, you can use line-height .

In your css:

 span#lblDiscount { line-height:180% }

Try approximately 120-200% of the normal line height, and this will put a good distance between the two lines. Hope this helps.

+1
source

For the second range, you can use pading-left: somevalue

Example: <span>..</span><span style="padding-left:4px">..</span>

-one
source

Source: https://habr.com/ru/post/1499230/

More articles:


All Articles