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 Luqman Shah
Luqman Shah
3,016 Points

CSS padding/margin error! What to do

So I am trying to create little to no space between my h1 element and the p element below it within my header, I used a padding property, but it did not work, I also tried using a margin property as well, the spacing above and below the elements only separate to a certain extent, but they don't allow me to set no separation at all. I'll let you take a look at the code:

html code: <header class="main-header"> <h1 class="title">Food Source</h1> <p class="title-dscrpt">Your source, for food stuff.</p> <nav class="nav"> <ul class="ulc"> <li><a id="#Home" href="#Home">Home</a></li> <li><a id="Articles" href="#Articles">Articles</a></li> <li><a id="Recipes" href="#Recipes">Recipes</a></li> <li><a id="About" href="#About">About</a></li> <li><a id="Contact" href="#Contact">Contact</a></li> </ul> </nav> </header>

css code: h1 { font-size: 80px; font-family: "Book Antiqua"; color: black; font-weight: bold; line-height: 2.5; text-align: center; padding: 0 0; }

.title-dscrpt { font-size: 40px; padding-top: 0px; display: block; }

EDIT: sorry I couldn't paste the code in it's original indentation and layout.

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

To preserve layout, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

1 Answer

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

H1 elements do have a default margin (but not padding), and so do paragraphs. And you're also adding space by expanding the line-height.

So for minimum space try these settings:

.title, .title-dscrpt {
    line-height: 1;
    margin: 0;
)
Luqman Shah
Luqman Shah
3,016 Points

Thank you again! You've been a great help :) I'll check out the video on code formatting as well, thanks!