Re: margin for multi-line span?



Joel Shepherd wrote:
"Jonathan N. Little" <lws4art@xxxxxxxxxxxxx> wrote:


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.

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

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
.



Relevant Pages

  • Re: span wont honor width... div will, but always have line break before and after
    ... IE 7.0 is honoring the span width for the first line. ... width, for example, if i have an inline image of 60 px, and i want to ... Yes you can use margins, ... It may however work in IE7 if you set widths ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: margin-right no effect whatsoever
    ... stated elsewhere and what you state below, that margin and padding apply ... specification to say anything specifically about inline box margins. ... so much it won't fit in its container, whatever you set the right margin ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: margin-right no effect whatsoever
    ... stated elsewhere and what you state below, that margin and padding apply ... It's just a margin and margins are spacers. ... specification to say anything specifically about inline box margins. ... called a "spacer" are the top and bottom margins of inline boxes. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: margin-right no effect whatsoever
    ... The right edge of theas block element will be determined by the ... Right margins _do_ affect inline elements. ... It's top and bottom margins that don't. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: to inline or not to inline
    ... Inline styles are useful for quick prototyping, ... for each span but probably not much. ... If it has one fixed dimension and one fluid dimension then you need ... four background images. ...
    (alt.html)