<span class="content"> only margins first line.

I have a block of text that i want to have a margin-left of 8px. When i apply the content span class to them (which has the css of)

span.content {
  margin-left:8px;
}

Code (markup):

it only makes the very first line in the text block have a left margin of 18 px. I would use <p> but i don't want a space before and after the text block, because that makes spaces in my layout.

 

<span> is an inline element. You have to use a block element to do what you want, e.g. <p> as you mentioned. If you don't want the space, you can use margin: 0; padding: 0; on the <p> element.

e.g.

<p class="unspaced content">Your content here</p>

Code (markup):

CSS:

.unspaced { margin: 0; padding: 0; }

Code (markup):

Feel free to think of a better name than unspaced or even a better method, something tells me this is not near optimal.

 

Yes, as described above I think it's because you are using a Span, you could put it inside a <div class="blah"></div> or even a paragraph, and just outline p { margin:0; padding: 0; } towards the top of your document to avoid spacing.
Hey krt lets hope the pool do the buisness tonight!!

 

The other alternative is to set the display of the span to block and then give it a width and a height.

 

i couldnt just set display:block; and the width would stay constrained to the size of the div?

 

It would block across the div only afaik? what happened when you tried display:block; exactly?

if you can't set display:block; then put it inside a div instead of a span?

 

If the div was its parent, yes, it would be 100% width of that div (its parent). of course, you can also make it less wide by setting a width on it.

 

thanks, i got what i wanted. i use <p> for blocks of text and for single lines i use <span>

but i have a php script that echos the result of a database in a list format (not using lists though, dont like them) so i have

php echo "<span>".table_data1." ".table_data2."</span><br>"

i want all that to be on one line, and then have it skip a line, that works, but i have alot of space between the lines. I tried setting margin:0; to the span, and also tried adding the px (margin:0px in there but nothing worked. In ie it works fine, and shoes them one right on top of another, but in ff theres space. Anything i can do to make it not space?

P.S. My site is www.gamersinsaninty.com

 

its been 3 days since i posted this, anyone have any answers for me?

 

Sorry, if it's PHP anything, I know nothing (and it might be a php thing, I dunno).

You can't set 0 margins on spans, for the same reason krt said you can't set margins... it's inline, so might have default padding but not margins.

You don't have a universal reset, just margin: 0; padding: 0; on the body element, so I think it could be FF's default padding... but that's just a guess.

Setting everything to zero will likely remove some other default margins and padding you're relying on, but the idea behind it is that if everyone is set to 0, then everyone's starting at the same place, and then when you add margins and padding stuff, it looks the same in all browsers.

If the universal reset
* {
margin: 0;
padding: 0;
}
completely destroys your page and you don't want to go back and set new margins/padding on everything, you can try just setting all spans to no padding near the top of your CSS.

span {
padding: 0;
}

You'll need to be more specific referring to other spans then, when you want them to have padding. Like #nameofparent span or something.
My best guess.

 

well, i use

span {
margin:0;
padding:0;
}

Code (markup):

but it doesnt fix it. and basically, the php thing is just the same as going

<span class="content">hello</span><br>
<span class="content>goodbye</span><br>

and so on, so i dont think it would be php. i have margins set on pretty much everything anyway, so i dont know if universal reset would do anything or not,

thanks for your help though, i guess it will just have to stay like that.

EDIT: universal reset did nothing except take like 2 px away from the margin between the three left boxes. The space is still between the <span> elements. I dont know why, what if i was to set display:block; on them?

EDIT 2: just tried display:block; makes it like a p and puts even MORE space between them. even without margins. i dont know whats going on, i guess ill jsut leave it how it is. thx.

 

You have:

<span class="content">hello</span><br>
<span class="content>goodbye</span><br>

Code (markup):

Maybe there's padding on span.content?

Give the spans with the class of content a nasty background colour like #ff0. Is it the spans themselves making the space (as opposed to space truly between the lines)? If so, it could be line-height set rather high?

 

I have four different levels of span, the regular span and then three other classes meant to have different padding.

heres my css

span {
  font-size:10px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  background-color:#FF00FF;
}
span.content {
  margin:0 0 0 3px;
  background-color:#FFCCFF;
}
span.title {
  font-weight:bold;
  background-color:#FF00CC;
}
span.left {
  margin:0 0 0 8px;
  background-color:#CC00FF;
}

Code (markup):

i made the spans all different colours, and im keeping it like this, the spans arent that big only the space around them, i think that firefox is putting padding on them, i may be wrong as i often am

anything you can tell me ?

(my site still has the bg colors if u wanna see www.gamersinsaninty.com)

 

What reason do you have for not marking the content with semantic tags? The whole purpose of html is to label each bit of content for what it is. The stylesheet will take care of how it looks.

You're doing nothing but making it harder on yourself to achieve the presentation results you want, and any attempts to add client side dynamic behavior will be a royal PITA.

cheers,

gary

 

what are you talking about? i really have no Headers so to speak, and everything else is basically just one line. why make it a block if its only one line? then id really have ugly spaces everywhere.

and sorry for not having the perfect website, i really did NOT mean to offend you, im only learning, why do you think i ask so many questions on these forums because i want to learn the CORRECT way, and so far i havent so i need some more guidance.

 

In your first post, you said

That's the point. For the markup, it doesn't matter. You use semantic markup. After everything is properly tagged, you tell the browser how to display it. You do not choose tags based on how the browser's default display looks.

OK, here's some guidance.

• Rule number one: mark your content for what it is.
• Rule number two: If there's any question about using some other scheme to decide on the right tag to use, refer to rule one.

gary

 

What he's saying is that it's best to use the proper markup for the job. Such as using headings for your "section titles", paragraphs for blocks of related sentences about a particular topic, lists for (well, lists, including lists of links), and so forth.

Don't worry about how it looks in a browser - CSS can change the appearance, and can even get rid of those spaces between elements as well. The following post I wrote shortly after signing up for the forums should give you an indication of how to code a Web page using standards-based practices. It's old though (by my standards), and a bit long in the tooth, and I also had to correct myself a couple posts down because I could no longer edit the post, but it should help.

http://forums.digitalpoint.com/showthread.php?p=2619952#post2619952

 

well now i do use <p> for my articles, so i should use headers for my titles? i don't considered those headers personally, but i will.

but i do have a lot of things that are just like one or two lines, that don't make up a paragraph, so it wouldn't be <p>, should it still be span?

 

The paragraph is "a brief composition complete in one typographical section or paragraph; an item, remark or quotation …" (Webster).

The <p> tag is the basic and most generic container for text, including inline replaced elements. Something as simple as "©2008", down at the bottom, belongs in the <p> container.

All content belongs in some semantic, block level container. That does not mean <div>. The <div> is a master container for block elements, and is a structural element that provides a group context.

The <span> is a segregating element for inline elements and #PCDATA. It allows you to specify content for special handling within the inline-box.

You are free to ignore the rules, but the closer you stick to them the easier it will be to get the results you want.

cheers,

gary

 

but if i stick everything in a <p> then it makes new lines when i dont want there to be, and creates ugly spaces (i know i can fix this in css so its ok)

so one line things should be a <p>? hm, okay.