<br />

DizzyOC

Hi Folks!

Just a quick one if I may...

Is there a better way of creating a gap in or around some text within a single <div> tag other than going <br /><br /><br /><br /><br />?

This seems a little archaic to me but I know of no other way. Any ideas?

Also - does anyone know if there's a significant difference between <br> and <br />?

Many thanks

/d

Webmonkey

You could put the text in a span and assign css to it:

<div><span style="margin:2px">2px margin around this text</span></div>

If you just want the bottom margin:
<div><span style="margin-bottom:20px;">more text</span></div>

To be honest it depends on what your requirements are but CSS should help you anyways.

DizzyOC

Webmonkey wrote: »

You could put the text in a span and assign css to it:

<div><span style="margin:2px">2px margin around this text</span></div>

If you just want the bottom margin:
<div><span style="margin-bottom:20px;">more text</span></div>

To be honest it depends on what your requirements are but CSS should help you anyways.

That indeed is an interesting option, thank you.
It's extra code but clearly offering more control. You wouldn't want to use it everywhere though would you?

Are there actually any issues with using <br /><br /><br /><br /><br /> regarding browser display? Am I looking for a solution that I don't actually need?

Thanks!

Webmonkey

Well is it actually more code if you must put <br /> ... etc? I think the <br /> looks more like a hack than the right way of doing it. I'm still not sure exactly what you are trying to achieve. You can move the CSS out in to a CSS file and reference it usign a class for eg.

<style>
.spacedText {
 margin-bottom: 20px;
}
</style>

.....
<div><span class="spacedText">hello</span></div>

There are many ways you can do things with CSS. I'd do some looking into that anyways if I were you.

You could put the text into a paragraph instead if you simply want to space paragraphs. <p>..</p>

Fanny Cradock

As far as I know <br /> can render differently across browsers. Why don't you use margin and padding instead?

By using id and classes you can assign css rules to elements such as <p> <h> <a> and also to your divs. This gives you far more flexibility than <br />.

<br /> (which is xhtml compliment code, <br> is not) might have it's uses but I wouldn't advise overusing it.

For the example below I'll just use margin.

#content{margin-bottom:20px}
p{margin-bottom:10px;}
#special{margin-bottom:50px;}


<div id="content">
<p>margin of 10 px</div>
<p>margin of 10 px</div>
<p id="special">margin of 50px</div>
</div>

Just a footnote, but I think it is possible to assign an id/ class to <br /> and set css rules for this. I can't say how well this works across browsers though.

cormee

DizzyOC wrote: »

Hi Folks!

Just a quick one if I may...

Is there a better way of creating a gap in or around some text within a single <div> tag other than going <br /><br /><br /><br /><br />?

This seems a little archaic to me but I know of no other way. Any ideas?

Also - does anyone know if there's a significant difference between <br> and <br />?

Many thanks

/d

You should never use (x)html to style your document. Always use CSS. What requires a <br /><br /><br /><br /> on a PC may not on a handheld device.

<br> is used in html, xhtml requires tags to close, so the tag self-closes using the <br />

cormee

Fanny Cradock wrote: »

As far as I know <br /> can render differently across browsers. Why don't you use margin and padding instead?

By using id and classes you can assign css rules to elements such as <p> <h> <a> and also to your divs. This gives you far more flexibility than <br />.

<br /> (which is xhtml compliment code, <br> is not) might have it's uses but I wouldn't advise overusing it.

For the example below I'll just use margin.

#content{margin-bottom:20px}
p{margin-bottom:10px;}
#special{margin-bottom:50px;}


<div id="content">
<p>margin of 10 px</div>
<p>margin of 10 px</div>
<p id="special">margin of 50px</div>
</div>

Just a footnote, but I think it is possible to assign an id/ class to <br /> and set css rules for this. I can't say how well this works across browsers though.

Use a reset.css to reset your <br>, then the styles you assign to the id or class will (should) act predictably across browsers.

If you want the standard <br> to have non-standard properties, without assigning a style or id, you can just redefine the <br> tag in your style sheet.

desaparecidos

Nothing wrong with using <br> to create a breakline between text. If some text happens to have multiple new lines in the middle of it, then use multiple <br>s.

<br> will take up the same amount of space a line of text would. It follows the line-height font-size properties of its sibling text.

Goodshape

desaparecidos wrote: »

Nothing wrong with using <br> to create a breakline between text. If some text happens to have multiple new lines in the middle of it, then use multiple <br>s.

Nothing wrong with using it for single line breaks -- that's what it's for -- but there's nothing right about using it to break-up sections of text.

Use <br /> for line-breaks, paragraphs (<p>) for paragraphs and <div>'s to separate divisions of your site or text.

Often, for a body of text, you'd want to use CSS to set a standard margin and padding on <p> tags and then perhaps add an "extra-margin" / "less-margin" class and CSS rule where necessary.

Using multiple single line breaks might look the same, similar, or "good enough" but in the long run it's limiting (something you might encounter if redesigning the website or layout in future) and incorrect practice. It might sound pernickety but there are correct ways of doing things, you might as well use them.


//edit --- webmonkey mentioned using <span> above but I don't think that's correct either. <span> is an in-line element and not used for dividing sections of text. It's better used, in conjunction with CSS, for adding style to text within a line or paragraph.

<div>
    <p>This is a paragraph with <br />a line break and <span style="color: blue;">some blue text</span></p>
    <p>Another paragraph with standard margin and padding.</p>
    <p style="margin-top:30px;">A third paragraph with forced 30px top margin.</p>
</div>

<div>
    <p>A paragraph relating to something else</p>
</div>

Giblet

<br /> is fine, but only use one and never at the beginning or end of a container.

Webmonkey

Goodshape wrote: »

//edit --- webmonkey mentioned using <span> above but I don't think that's correct either. <span> is an in-line element and not used for dividing sections of text. It's better used, in conjunction with CSS, for adding style to text within a line or paragraph.

Indeed. Looking back now it doesn't make much sense. I was in the styling mindset as you mentioned.

Thanks

JumpJump1

This is what margins are for.

Giblet

JumpJump1 wrote: »

This is what margins are for.

Margins are for margins, breaks are for line breaks. The problem is people using <br /> where they need margins, but you can use them providing you are breaking a sentence. (Using margins to break requires 2 elements, one set with a margin, which is overkill.)

JumpJump1

But he's not looking for a line-break, is he? He wants to create a gap around some text, so my suggestion would be to add the desired space to the margins of a <p> element. I could be wrong, of course. I do have an aversion to the <br/> tag as it is used un-semantically 99% of the time.

DizzyOC

It's a bit of a fascinating discussion! Thank you all for the time you have taken here. It seems to me that all options will work - but some will work better than others.
So far I have garnered that I should...
- use <br> instead of <br /> in html.
- only use <br> to do a single 'carriage return'.
- use <p> to denote paragraphs because css is better than html. Margin-bottom can be used to denote space between paragraphs.
- <p> tags make using <br> tags to create space at the bottom of containers redundant.

Does that all sound about right? Will my html/css be better if i adhere to the above guides? Yiz are all deadly, thanks!

DizzyOC

JumpJump1 wrote: »

But he's not looking for a line-break, is he? He wants to create a gap around some text, so my suggestion would be to add the desired space to the margins of a <p> element. I could be wrong, of course. I do have an aversion to the <br/> tag as it is used un-semantically 99% of the time.

Yes. A <br> has a job to do, but I always felt a bit dirty using it - a bit like watching T20 cricket - it fills the need for watching cricket but you know it's just not quite right!

Giblet

A correct except, it IS <br />

mewso

Giblet wrote: »

A correct except, it IS <br />

If using an xhtml or html5 doctype. Not that modern browsers care either way.

Fanny Cradock

DizzyOC wrote: »

It's a bit of a fascinating discussion! Thank you all for the time you have taken here. It seems to me that all options will work - but some will work better than others.
So far I have garnered that I should...
- use <br> instead of <br /> in html.
- only use <br> to do a single 'carriage return'.
- use <p> to denote paragraphs because css is better than html. Margin-bottom can be used to denote space between paragraphs.
- <p> tags make using <br> tags to create space at the bottom of containers redundant.

Does that all sound about right? Will my html/css be better if i adhere to the above guides? Yiz are all deadly, thanks!

Yes, that's about right.

Your html/css won't be better if you adhere to the above, it will just be more in line with practices that people use - at least people I'm aware of working in development use.

<br /> and <br> is fine, especially if you want text within a text element to go onto the next line, .e.g. <p>first line goes here <br /> the second line goes here </p> or if you want a quick space inserted into your page.

To reiterate, you can apply css to a <br /> element. The below example will set a bottom margin of 50px. You can also use line height or height, e.g.,[HTML] br {line-height:50px;}[/HTML], to generate space between text. (If you don't set css rules then the space the br creates might differ across browsers. I assume that assigning a height/ line-height/ margin to the br will solve this but I don't know it for sure.)

[HTML]
<html>
<head>
<style type="text/css">
br{

height:50px;

}
p{
margin:0;
}
</style>
</head>
<body>
<div>
<p> top text </p>
<br />
<p> bottom text </p>
</div>
</body>
</html>[/HTML]

While I will fairly often use a <br /> within a text element (very useful for newsleters, I find), I have never styled a br. And this is largely because I don't see the point. I would rather put margins or whatever on text elements such as <h>, <p>, <a> etc. These are elements that will appear throughout the site and it just makes more sense to use them as opposed to inserting and styling another element just for spaces. All the text elements <h>, <p> etc., already allow you to add space.

But different horses for different courses.

DizzyOC

@Fanny Cradock:
Thanks boss. Very clear. Appreciate the time you took to run through that... copied & pasted to samples/memory!

DizzyOC

<h>, <p>, <a> = Kings.