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

CSS

Posted by A.J. Liptak
A.J. Liptak
5,643 Points

Are Paragraphs <p></p> Breaking The Design?

As practice, I've removed the gallery (the <ul> tags and everything in between) from the project and added some generic content, namely three <sections>, each with one paragraph. I have changed nothing in the header, nor in the CSS; I've only added content within the "wrapper" div. What I'm finding is a gap above the header.

After a lot of troubleshooting, I've determined that somehow just having <p> tags (even without content between them) in the <section> is the cause. I have no idea how or why.

Here's my code: https://w.trhou.se/y3u2id5cum

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

This is called margin collapse. The margin of a child element will extend beyond the parent element if there is nothing intervening (like padding or borders). By default, p elements have vertical margins.

:point_right: One way to change this would be to remove the top margin from the first paragraph in each section:

section p:first-child { margin-top: 0; }

Another way would be to add clear: both; to the rule for #wrapper, to separate the paragraph from the header. (This fix would only affect the first section.)

A.J. Liptak
A.J. Liptak
5,643 Points

Thanks, Steven, that bit of code removed the gap at the top.

Now, I don't want to appear dense: I think I understand margin collapse, but I don't understand how the text of that first paragraph is not hidden behind the header. Instead, though the top margin of the paragraph is zeroed out and rests completely at the top of the page, the text of that paragraph begins right under the bottom border of the header. It's as if padding-top was added to the paragraph.

If the header is floated and thus taken out of the normal flow of the document, shouldn't that first paragraph be hidden by the header?

(I tested this by removing the coloring of the header, and added a background-color to the paragraphs.)

Kailash Seshadri
Kailash Seshadri
3,087 Points
Kailash Seshadri
Kailash Seshadri
3,087 Points

Hi Liptak.. Even I went through and i could not find anything wrong with the responsive or main.css. it might be a bug on chrome; try opening the preview in another browser like internet explorer or microsoft edge on windows 10.. if u want it fixed, add a margin top value of -16 px in the main.css:

header  {
  float: left;
  margin: -16px 0 30px 0;
  padding: 5px 0 0 0;  
  width: 100%;
}