margin for multi-line span?

[wolfing1]

I have a <span> block with text that wraps for several lines. I want it
with a margin of 20px so I did a...
<span style="margin-left:20px">.......</span>
But only the first line showed the margin. How can I have it so all
the lines resulting from the <span> are shifted 20px to the right? (or
should I use tables for this?)

 

[Jonathan N. Little]

I have a <span> block with text that wraps for several lines. I want it
with a margin of 20px so I did a...
<span style="margin-left:20px">.......</span>
But only the first line showed the margin. How can I have it so all
the lines resulting from the <span> are shifted 20px to the right? (or
should I use tables for this?)

No, you want a block not inline element.

<div style="margin-left:20px">.......</div>

 

[wolfing1]

No, you want a block not inline element.

<div style="margin-left:20px">.......</div>

eh?
thought <div> ignored left and right margins

 

[Jonathan N. Little]

eh?
thought <div> ignored left and right margins

Says who? Not if you style them to have margins. Margins are for block
elements anyway, DIV is a block element, SPAN is not.

 

[Joel Shepherd]

Says who? Not if you style them to have margins. Margins are for block
elements anyway, DIV is a block element, SPAN is not.

Hmm. This seems to eventually getting around to saying that margins are
meaningful for "inline boxes" (of which SPAN is an example), but the
behavior for an inline box contained in a single "line box" differs from
that of one split across two or more line boxes.

<http://www.w3.org/TR/CSS21/visuren.html#inline-formatting>

That would seem to explain what the OP is observing.

(Oh dear. I seemed to have forgotten that a proper response should
include "If you can't Google it, I can't teach it", or warn all
concerned from "putting digits to keyboard again", or snarl "put a sock
in it" ... but, it is apparently possible to have a civilized discussion
even about something as thoroughly addressed by the specs as this
subject seems to be.) Boy, did I say that out loud? Please excuse me.

 

[Jonathan N. Little]

Hmm. This seems to eventually getting around to saying that margins are
meaningful for "inline boxes" (of which SPAN is an example), but the
behavior for an inline box contained in a single "line box" differs from
that of one split across two or more line boxes.

<http://www.w3.org/TR/CSS21/visuren.html#inline-formatting>

That would seem to explain what the OP is observing.

(Oh dear. I seemed to have forgotten that a proper response should
include "If you can't Google it, I can't teach it", or warn all
concerned from "putting digits to keyboard again", or snarl "put a sock
in it" ... but, it is apparently possible to have a civilized discussion
even about something as thoroughly addressed by the specs as this
subject seems to be.) Boy, did I say that out loud? Please excuse me.

Yes, but the OP stated

"I have a <span> block with text that wraps for several lines. I want it
with a margin of 20px so I did a...
<span style="margin-left:20px">.......</span>
But only the first line showed the margin. How can I have it so all
the lines resulting from the <span> are shifted 20px to the right? (or
should I use tables for this?)"

That is behavior of a *block* element, not an *inline* or
*inline-block*. Because inline elements flow within their containing
blocks they have no explicit width of their own. So left and right
margins are only applied to the beginning and ending of their content
even if the containing block forces the inline to wrap. That is not what
the OP wants, he wanted the 20px left margin to be applied on the left
side of the wrap lines, i.e., a block with width. That is block
behavior, not inline.

I misspoke, on margins I meant in context with explicit widths....

 

[wolfing1]

Says who? Not if you style them to have margins. Margins are for block
elements anyway, DIV is a block element, SPAN is not.

Sorry for the stupid questions, I've been using tables all my life but
I'm trying to switch to using styles and stuff for formatting, so I'm
getting into some bumps here and there. So I guess it is wrong then to
define a margin for a span and should instead put a <div> around the
span for the margins? (by the way, I changed the span for div as you
said and it worked perfectly, thanks).
Another question if you all don't mind. With tables I normally used a
CSS file for all the pages, but since I'm now supposed to define all
the styles for each type of <div> and <span> I use in my pages in the
CSS file... guess I should kinda make a CSS per web page now (for each
page's particular style) plus a common one for the common styles?
Because if I put it all in one file as I'm used to, pages will be
including a lot of unnecessary styles (they'd be including styles from
many other pages that the particular page doesn't use)

 

[Beauregard T. Shagnasty]

Another question if you all don't mind.

(probably should have been a new thread.)

With tables I normally used a CSS file for all the pages, but since
I'm now supposed to define all the styles for each type of <div> and
<span> I use in my pages in the CSS file... guess I should kinda make
a CSS per web page now (for each page's particular style) plus a
common one for the common styles?

The most successful sites generally have a consistent theme across all
pages, or at least across groups of pages relating to the same subject.
If you change themes/design on every page, your visitors will have to
relearn for each page. Not a good idea.

Use one CSS stylesheet for the whole site, and - if necessary - place
the rare "used-once" styles in the head section of the individual pages.

Careful planning negates the use of "styles for each type of <div> and

Because if I put it all in one file as I'm used to, pages will be
including a lot of unnecessary styles (they'd be including styles
from many other pages that the particular page doesn't use)

Your style sheet would be loaded and cached upon first visit, and not
needed to be downloaded for each subsequent page. So a few extra styles
in the sheet are not a penalty.