Menu
I have the following span
<SPAN style="border:solid;TEXT-ALIGN: right; FONT-STYLE: normal;width:100px; padding-RIGHT: 50px; DISPLAY: inline-block;PADDING-TOP: 3px">hello world</SPAN>
It seems to me the total width of the span is increasing base on the padding size. Is there a way to prevent the span size from increasing and pad the text to the right?
514
To change the default block type of an element, we use the display property. To make the element block type, we use display: block; and to make it inline-block type use display: inline-block; . You can set the width and height of the span tag either by using display: inline-block; or display: block; .
span won't have padding because it is an inline element by default, so set inline-block or block.
The <span> tag is a inline element, it fits into the flow of the content and can be distributed over multiple lines. We can not specify a height or width or surround it with a margin.
Since span tags are inline, not block elements. They can only take margin left and right, not top and bottom.
Don't know if your padding-right actually works with a space there, but it shouldn't be there. Could be another problem as well. you have
padding- right:50px
instead of
padding-right:50px;
Edit: to increase space outside of your span rather than increasing the span itself replace:
padding-right:50px;
with
margin-right:50px;
Here is an example. fiddle with it if you don't quite understand. http://jsfiddle.net/robx/GaMpq/
60
Use margin instead of padding. Padding is space applied inside the element, margin is space applied outside the element.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
