Member Avatar for ibthevivin

So basically I can't remove the blank space right above the 32% rating (Red 32%) & and the small sliver of space right below "Showing 1-6 of 88 reviews" at the bottom.

I provided my entire code here with the links below, but if you search specifically for "/*Code that implements appearance detail 5 in homework handout */" you'll find the part of my CSS that I can't figure out and where I think the problem is.

Sorry for just giving you the entire code. I felt that it may be a good idea to post the entire thing just so you can look over the whole thing just in case.

Click Here and you'll see what it needs to be in the end.

Click Here and you'll see my HTML code.

Click Here and you'll see my CSS code.

Click Here and here's the assignment rubric, but I doubt that'll clarify anything.

Thanks in advance!

While reading the code, feel free to critique my coding style and offer feedback. Thanks.

  • 2 Contributors
  • 3 Replies
  • 202 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

As observed, the symptoms described by (a blank area above the red "32%" badge and a thin gap below "Showing 1-6 of 88 reviews") usually come from a mix of invalid markup plus default browser spacing and inline-layout quirks. A paragraph nested inside another paragraph will cause browsers to auto-close tags and leave unexpected margins; that, combined with paragraph default margins, inline-block baseline alignment, or margin collapse, produces the exact “mysterious” gaps reported.

Practical, low-risk remedies that address the common causes:

  • Replace any inner <p> used purely as a wrapper with a semantic block container (div) or an inline element (span) so markup stays valid.
  • Remove default paragraph spacing where pixel-perfect alignment is required.
  • Control inline-block alignment and prevent margin collapse on the parent.
p { margin: 0; }
.ratingPercentage { display: inline-block; vertical-align: middle; line-height: 1; margin: 0; }
.parent { overflow: auto; /* or add padding-top:1px / border-top:1px solid transparent */ }

Troubleshooting checklist (use devtools while testing): inspect the element and view the Computed box model to see which element contributes the top/bottom margin; toggle display, margin, and vertical-align live; look for stray whitespace between inline-block elements (creates ~4px gaps); and validate HTML to catch nested/unclosed tags. In most cases fixing the nested <p>, zeroing paragraph margins where needed, and explicitly setting display/vertical-align on the rating element eliminates both the large gap above the percentage and the thin sliver beneath the reviews.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

In your HTML code, change the element in lines 22-25 ("ratingPercentage" block) from a paragraph <p> to a <div> element.

Edited by JorgeM
commented: Solved the problem. +1
Member Avatar for ibthevivin

Thanks for catching that. I also noticed another issue of having a <p> tag in <p> tag. Didn't know that will cause my code to not validate so severely. >_<

Member Avatar for JorgeM

Glad to hear you resolved the problem.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.