Comments on this code please

K

KiwiBrian

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
 
D

dorayme

Ben C said:
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.


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 padding you have should have done that.


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.
Click to expand...

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

Murray

<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
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am trying to detect Which image id="" was clicked ? 22
Please Help? 0
Need help with code on website (noob) 2
Working on mobile css menu with plenty of frustration! 2
Show text on-click with transition 2
Help with code 0
Why is the e.target not working here? 1
Login button code 8

Members online

Total: 22 (members: 2, guests: 20)
Robots: 340

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top