margin for multi-line span?

Discussion in 'HTML' started by wolfing1@gmail.com, Jul 11, 2006.

  1. Guest

    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?)
    , Jul 11, 2006
    #1
    1. Advertising

  2. wrote:
    > 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>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jul 11, 2006
    #2
    1. Advertising

  3. Guest

    Jonathan N. Little wrote:
    > wrote:
    > > 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>
    >

    eh?
    thought <div> ignored left and right margins
    , Jul 11, 2006
    #3
  4. wrote:
    > Jonathan N. Little wrote:
    >> wrote:
    >>> 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>
    >>

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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jul 11, 2006
    #4
  5. "Jonathan N. Little" <> 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.

    --
    Joel.
    Joel Shepherd, Jul 12, 2006
    #5
  6. Joel Shepherd wrote:
    > "Jonathan N. Little" <> 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
    Jonathan N. Little, Jul 12, 2006
    #6
  7. Guest

    Jonathan N. Little wrote:
    > wrote:
    > > Jonathan N. Little wrote:
    > >> wrote:
    > >>> 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>
    > >>

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

    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)
    , Jul 12, 2006
    #7
  8. wrote:

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

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

    --
    -bts
    -Warning: I brake for lawn deer
    Beauregard T. Shagnasty, Jul 12, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    536
    dorayme
    Jun 26, 2009
  2. Stéphane Klein
    Replies:
    2
    Views:
    1,736
    John Nagle
    Mar 30, 2010
  3. Stefan Behnel
    Replies:
    0
    Views:
    475
    Stefan Behnel
    Mar 29, 2010
  4. Cal Who
    Replies:
    1
    Views:
    418
    Alexey Smirnov
    May 16, 2010
  5. Cal Who
    Replies:
    4
    Views:
    566
    Cal Who
    May 17, 2010
Loading...

Share This Page