Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Comments on this code please

Reply
Thread Tools

Comments on this code please

 
 
KiwiBrian
Guest
Posts: n/a
 
      01-19-2009
This is a test snippet within a valid page environment.
My purpose was to explore how to space 3 pieces of text on a line with 20px
of space between them.
As it does not seem to be obeying the margin-top:100px I suspect that the
construction may be functionaly invalid, although it apparantly validates
OK.
I have two queries:
Why is the margin-top seemingly ignored?
Is there a better way of accomplishing my objective?
The basic task that I was investigating was how to add controllable spacing
between text blocks.

<body>
<span style="border:2px solid red; padding:5px; margin-top:100px">12345<span
style="padding-left:20px">67890</span><span
style="padding-left:20px">abcde</span></span>
</body>

TIA


 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      01-19-2009
In article <(E-Mail Removed)>,
Ben C <(E-Mail Removed)> wrote:

> On 2009-01-19, KiwiBrian <(E-Mail Removed)> wrote:
> > This is a test snippet within a valid page environment.
> > My purpose was to explore how to space 3 pieces of text on a line with 20px
> > of space between them.
> > As it does not seem to be obeying the margin-top:100px I suspect that the
> > construction may be functionaly invalid, although it apparantly validates
> > OK.
> > I have two queries:
> > Why is the margin-top seemingly ignored?

>
> It's meaningless on an inline box. Technically top and bottom margins do
> apply to inline boxes, but they are invisible and don't push anything
> else out of the way, so they might as well not be there.
>
> > Is there a better way of accomplishing my objective?

>
> Set line-height on the span instead of margin-top. But I don't know
> exactly what you want from this margin-- it has nothing to do with
> putting spacing between the text blocks which is the basic task you're
> trying to do.
>
> > The basic task that I was investigating was how to add controllable
> > spacing between text blocks.

>
> The padding you have should have done that.
>
> ><body>
> ><span style="border:2px solid red; padding:5px; margin-top:100px">12345<span
> > style="padding-left:20px">67890</span><span
> > style="padding-left:20px">abcde</span></span>
> ></body>

>
> You're not supposed to just put a <span> inside <body>. It ought to be a
> div or something "block-level" in the HTML sense. Always check with a
> validator.


Perhaps OP is looking for this effect:

<div style="float: left; border:2px solid red; padding:5px;
margin-top:100px">12345<span
style="padding-left:20px">67890</span><span
style="padding-left:20px">abcde</span>
</div>

The div floated only for the purpose of shrinking so border shows off
the even spacing... all depends on what is wanted.

--
dorayme
 
Reply With Quote
 
 
 
 
Murray
Guest
Posts: n/a
 
      01-21-2009

> <body>
> <span style="border:2px solid red; padding:5px; margin-top:100px">12345<span
> style="padding-left:20px">67890</span><span
> style="padding-left:20px">abcde</span></span>
> </body>
>
> TIA


Yeah, as mentioned, it depends on your reason for separating them.
Another option, if their separation is fairly important, is to use an
unordered list.

<ul style="border: 1px solid red; float: left;">
<li style="list-style: none; padding: 0; margin: 0 20px 0 0; float:
left">123</li>
<li style="list-style: none; padding: 0; margin: 0 20px 0 0; float:
left">456</li>
<li style="list-style: none; padding: 0; margin: 0 0 0 0; float:
left">789</li>
</ul>

And if you're using a separate style sheet you could give the last
list item a special class="last" which has no margin.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
adding proper functionality to code.Please read comments in code andfirst test it in your browser to see the effect. Mclaren Fan Javascript 2 11-08-2011 05:50 PM
A program to replace all JS comments with JSP comments in jsp files tungchau81@yahoo.com Javascript 4 06-03-2006 02:00 PM
A program to replace all JS comments with JSP comments in jsp files tungchau81@yahoo.com Java 0 06-02-2006 06:35 AM
Comments format: comments extending over multi-line Monk C Programming 10 04-20-2005 05:09 PM
please, your comments on why this code won't work learningjava Java 8 12-12-2003 05:05 PM



Advertisments