Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Can't get a 'break'

Hi all, I need your help.

If you will visit my website http://www.meganoneill.com.au/Proven_Benefits.html you will notice that all the paragraphs are together. This is obviously no good, so I put a few <p></p> in to break it up, but nothing happened. I tried again, and I littered my code with empty paragraphs, or paragraphs with spaces. I literally put heaps of them everywhere in the end. It should have looked ridiculous the amount of space it would have created, and I refreshed... and nothing. Then I tried with breaks (<br>) and no amount of them could budge the text either.

What on earth is going on? :(

7 Answers

Sandra Weber
Sandra Weber
1,531 Points

Adding empty paragraphs won't work, because browsers won't render them, they're simply ignored. This could be the source of your frustration. Spaces (" ") or line returns (return/enter key) are ignored too.

If you want more control over the spacing, try adding some bottom margin to your li elements, and inside them use p tags. Close the p and start a new one when you want a line break.

Sandra Weber
Sandra Weber
1,531 Points

If you tried to put br tags inside your lists, but outside of the list items, those will be ignored too because the only things allowed directly inside uls and ols are the list item tags (yes, HTML has a lot of rules that don't immediately make sense.)

Line breaks are a way to visually format content, and HTML isn't really designed to say anything about how content looks. If you have a list of things, all the HTML can do for you is say what the things in the list are. In order to change how the list looks, which is what putting spaces in will do, then CSS is a better tool for that. The opinionated people who made HTML even decided to completely disallow line breaks inside lists in order to enforce the separation of HTML (content) and CSS (appearance).

Using CSS is a lot easier than putting lots of br tags everywhere, because with 3 lines of CSS code you can add spacing to your list items and paragraphs, instead of having to put line breaks every single place that spacing is needed!

Ah. I can't write code on these things. In the second sentence, it should read "so I put a few (less than, p, greater than, less than, forward slash, p, greater than)s in to break it up..." And there should be "less than, b, r, greater than" in the empty brackets in the penultimate sentence. Ta.

Marcus Tisäter
Marcus Tisäter
4,886 Points

I suggest you to take a closer look into positioning text with the help of CSS if you struggle. It's easy to learn and everything will get so much more easier working with HTML&CSS. Good job and good luck with the website project!

Thanks, I do have a stylesheet for my page, but that doesn't change the fact that if I ask for an empty paragraph or break in the HTML, I should get an empty paragraph or break!

OK... but I did see a treehouse basic example in which Nick filled his html with empty paragraphs and he got empty paragraphs... and what about the fact that breaks won't work either?

I need space around my lists, nested lists as well as paragraphs. Looks like I'm going to end up doing it in the stylesheet but I'm still unhappy that I don't understand why I can't get what I thought I should get.

John Locke
John Locke
15,479 Points

body { line-height: 1.4em; } ul li { margin-bottom: 1em; }