vs. display: block

**DoubleDee** · Dec 15, 2011 21:36

I have the following Event Date that I want on two lines...

Code:

	<li>
		Sioux Falls, SD<br />
		<small>January 7, 2011</small>
	</li>

What is the difference between using a   to put the Date on the second line versus using display: block; to create the same end result?

Is one better?

Is one worse?

Any side effects that could pop up?

Or are they basically two ways to accomplish the same things?!

Thanks,

Debbie

**dresden_phoenix** · Dec 16, 2011 02:15

The difference is you are using markup to accomplish a completely presentational task ( which as you know isreally frowned upon, if you can avoid it.)

This is OK:

Code:

<h1>My title:<br /> Some tile words</h1>
This is weak code:
<h1>My title:<br /><small> Some tile words</small></h1>
<h1>My title:<small> Some tile words</small></h1> / tag small {display:block;}  would be the best practice.

The only way to tell if a BR is totally unavoidable, would be semantics; I just cant think of an example where you couldn't AT LEAST use a SPAN instead of a BR .

**PhilipToop** · Dec 16, 2011 02:21

At one level it is really a question of appropriateness of mark up. You should use mark up that is appropriate to the situation. The classic 'no no' is the use of a tables for layout.

In the example you have given the would seem entirely appropriate.

If you did use a <div> the you could style it (padding, margin, colour, font etc) but that's about the only advantage.

**imaginekitty** · Dec 16, 2011 05:31

What about using li { white-space: pre-line; } This will preserve the line break without the use of or .

Code HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>break</title>
	<style type="text/css">
		li {
			white-space: pre-line;
	</style>
</head>
<body>
	<ul>
	<li>
		Sioux Falls, SD
		<small>January 7, 2011</small>
	</li><li>
		Sioux Falls, SD
		<small>January 8, 2011</small>
	</li><li>
		Sioux Falls, SD
		<small>January 9, 2011</small>
	</li></ul>
</body>
</html>

**Talks_44** · Dec 16, 2011 06:23

I still use myself as I haven't really come across many people telling me I shouldn't or making references to avoiding it. Though the two examples presented in this thread seem like viable options..

**imaginekitty** · Dec 16, 2011 06:37

Oops. I forgot a "}" in the previous example.

You can also do something like this:

Code HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>break</title>
	<style type="text/css">
		small:before {
			content: "\A";
			white-space: pre;
		}
	</style>
</head>
<body>
	<ul>
		<li>Sioux Falls, SD <small>January 7, 2011</small> </li>
		<li>Sioux Falls, SD <small>January 8, 2011</small> </li>
		<li>Sioux Falls, SD <small>January 9, 2011</small> </li>
	</ul>
</body>
</html>

This may be better as you won't have to consider the line breaks in the markup.

**PicnicTutorials** · Dec 16, 2011 07:25

a br's use is that of a line beak. If you need a line break then it is the preferred tag to do so. You can wrap each in a span or whatever and say display block do do it the css way instead. Each is acceptable and neither has pros or cons vs. I use br's as that is what they are intended for.

**xhtmlcoder** · Dec 16, 2011 07:28

Song lyrics are the typical correct use of BR where a forced line break is usually desired for obvious reasons and sometimes with forms they tend to make things slightly easier on rare occasion. The markup is always hardcoded and in play whereas the CSS is presentational such as line spacing effects, etc.

**DoubleDee** · Dec 16, 2011 10:39

I ended up going with display: block since it allowed me to have the Date "hug" the Location...

Code:

<h3>Current Dates:</h3>
<ul id="currentDates">
	<li>
		Sioux Falls, SD
		<small>January 7, 2011</small>
	</li>

Code:

#boxWorkshops ul#currentDates li small{
	display: block;
	margin-top: -0.1em;
	font-size: 0.8em;
}

Debbie

**Paul O'B** · Dec 16, 2011 12:54

With CSS turned off a break will give you a line break and a span won't.

Therefore you need to decide :

a) Whether your text is one line but split onto two only for presentation so a span would be ideal.

b) If it's two unrelated lines and therefore should be separate block level tags anyway.

c) If it's basically one train of thought like a poem or song on different lines and then a break would be suitable.

d) Some gray area between all the above and you have to decide yourself

To me it looks like a definition list with the DT as the Location and the date as the definition (or a table perhaps).

**DoubleDee** · Dec 16, 2011 12:58

Originally Posted by Paul O'B

With CSS turned off a break will give you a line break and a span won't.

Therefore you need to decide :

a) Whether your text is one line but split onto two only for presentation so a span would be ideal.

It could be one line, although two is preferred.

To me it looks like a definition list with the DT as the Location and the date as the definition (or a table perhaps).

Don't let DeathShadow hear you say that!!

BTW, so why is it that I couldn't get the Date to "hug" the Location when I had a ?

When I switched to a display: block, it solved that issue, and thus is why I ditched the .

Debbie

**Paul O'B** · Dec 16, 2011 13:10

Originally Posted by DoubleDee

Don't let DeathShadow hear you say that!!

Different views are what you get in a forum -we don't always have to agree though

. There can be good arguments on both sides so don't be swayed by mine or anyone else's but make your own mind up.

BTW, so why is it that I couldn't get the Date to "hug" the Location when I had a ?

Probably the default line height for the break coming into play. Breaks can be hard to control if you want pixel precision.

**sdt76** · Dec 16, 2011 13:25

Originally Posted by DoubleDee

I have the following Event Date that I want on two lines...

Code:

	<li>
		Sioux Falls, SD<br />
		<small>January 7, 2011</small>
	</li>

What is the difference between using a   to put the Date on the second line versus using display: block; to create the same end result?

Is one better?

Is one worse?

Any side effects that could pop up?

Or are they basically two ways to accomplish the same things?!

Thanks,

Debbie

is for line breaks. What you have is a line break.

The idea of using CSS for presentation is there to HELP you, not to force you to obey some rules other people make and force you to live under their rule, to your own detriment. CSS makes site-wide maintenance easier. Do you break address lines in many many pages? In other words, do you have that convention of presenting an address on two lines on alot of pages, and do you see yourself changing that in the future? If you use the block idea, in the CSS you could simply remove that block, and all those line breaks in all those addresses will bump back up. Easy change.

But do you have one address on one page you are breaking? If so, maybe it is better to use a line break. But then think whether or not you will expand the page to include many many addresses with two line breaks, that may eventually have one line. Just make sure CSS and HTML is helping your project, not hindering you just because some purists have a Golden Calf.

**DoubleDee** · Dec 16, 2011 13:47

Originally Posted by Paul O'B

Different views are what you get in a forum -we don't always have to agree though

.

And you are a bold man to disagree with DeathShadow!!

Probably the default line height for the break coming into play. Breaks can be hard to control if you want pixel precision.

So how risky is it to you display: block for fear users will have CSS turned off? (Sounds like is "guaranteed"...)

Debbie

**imaginekitty** · Dec 16, 2011 13:58

I would imagine that someone that disables CSS would expect minor differences. If they're taking the styling out of the rest of the page do you think they'll mind the city on the same line as the date?

You do ask the best questions here.

**felgall** · Dec 16, 2011 14:02

What I am still wondering is why so many people write a line break as when in HTML the tag is and in XHTML it is (no space). The space is only needed for XHTML served as HTML to Netscape 4 users. Do all these people using really have that many visitors still using Netscape 4?

**Paul O'B** · Dec 16, 2011 14:24

Originally Posted by imaginekitty

I would imagine that someone that disables CSS would expect minor differences.)

My point wasn't really that users will disable css but more that you can get a good idea of the structure of your page by turning css off. If the html is logical and sensible you can get well laid out and readable text. If the whole site is one long line that stretches into infinity then you are doing something wrong

It shouldn't really be of prime importance that pages work with css turned off but it's a good tool to use occasionally - just like switching images and js off which a lot of advanced users do anyway.

To be honest it's not an earth shattering decision whether you use a break or a span in the above scenario but is is wrong to use breaks just to make space. Breaks have a meaning and should be used where required.

**imaginekitty** · Dec 16, 2011 14:27

Originally Posted by Paul O'B

My point wasn't really that users will disable css but more that you can get a good idea of the structure of your page by turning css off. If the html is logical and sensible you can get well laid out and readable text. If the whole site is one long line that stretches into infinity then you are doing something wrong

It shouldn't really be of prime importance that pages work with css turned off but it's a good tool to use occasionally - just like switching images and js off which a lot of advanced users do anyway.

To be honest it's not an earth shattering decision whether you use a break or a span in the above scenario but is is wrong to use breaks just to make space. Breaks have a meaning and should be used where required.

I do agree. I've never disabled CSS after the fact. I always try to have my markup complete before adding CSS so I guess I do it inside out.

**DoubleDee** · Dec 16, 2011 15:14

Originally Posted by imaginekitty

You do ask the best questions here.

Thanks!!

Debbie

**DoubleDee** · Dec 16, 2011 15:18

Originally Posted by Paul O'B

My point wasn't really that users will disable css but more that you can get a good idea of the structure of your page by turning css off. If the html is logical and sensible you can get well laid out and readable text. If the whole site is one long line that stretches into infinity then you are doing something wrong

Yep, the whole point of my Release #2 is to streamline my code...

To be honest it's not an earth shattering decision whether you use a break or a span in the above scenario but is is wrong to use breaks just to make space. Breaks have a meaning and should be used where required.

Well Paul, oddz recently said...

Code:

On a scale of 1 – 10 the things you always seem to get caught up on are a 1… maybe a 2.

Man… if you working in the industry you would be making about a dollar an hour in regards to how much you concern yourself with micro issues.

As the saying goes, "Do one thing, and do it better than anyone!"

(Hey, I'm an Analyst by day. What else would you expect?!)

Thanks,

Debbie

User Tag List

Thread: <br /> vs. display: block

Thread Tools

Display

<br /> vs. display: block

Bookmarks

Bookmarks

Posting Permissions