Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   margin for multi-line span? (http://www.velocityreviews.com/forums/t303675-margin-for-multi-line-span.html)

wolfing1@gmail.com 07-11-2006 06:51 PM

margin for multi-line span?
 
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 07-11-2006 08:14 PM

Re: margin for multi-line span?
 
wolfing1@gmail.com 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

wolfing1@gmail.com 07-11-2006 09:19 PM

Re: margin for multi-line span?
 

Jonathan N. Little wrote:
> wolfing1@gmail.com 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


Jonathan N. Little 07-11-2006 09:52 PM

Re: margin for multi-line span?
 
wolfing1@gmail.com wrote:
> Jonathan N. Little wrote:
>> wolfing1@gmail.com 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

Joel Shepherd 07-12-2006 05:16 AM

Re: margin for multi-line span?
 
"Jonathan N. Little" <lws4art@centralva.net> 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.

Jonathan N. Little 07-12-2006 11:41 AM

Re: margin for multi-line span?
 
Joel Shepherd wrote:
> "Jonathan N. Little" <lws4art@centralva.net> 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

wolfing1@gmail.com 07-12-2006 01:13 PM

Re: margin for multi-line span?
 

Jonathan N. Little wrote:
> wolfing1@gmail.com wrote:
> > Jonathan N. Little wrote:
> >> wolfing1@gmail.com 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)


Beauregard T. Shagnasty 07-12-2006 01:42 PM

Re: margin for multi-line span?
 
wolfing1@gmail.com 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


All times are GMT. The time now is 07:46 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.