Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

span text padding increase span size

Tags:

html

css

padding

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?

like image 514
CliffC Avatar asked May 04 '11 03:05

CliffC


People also ask

How can I increase my span size?

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; .

Does padding work on span?

span won't have padding because it is an inline element by default, so set inline-block or block.

Can I set width of span?

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.

Can I add margin to span?

Since span tags are inline, not block elements. They can only take margin left and right, not top and bottom.


2 Answers

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/

like image 60
robx Avatar answered Sep 24 '22 02:09

robx


Use margin instead of padding. Padding is space applied inside the element, margin is space applied outside the element.

like image 24
ryanmarc Avatar answered Sep 26 '22 02:09

ryanmarc