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

Alexandra Velez
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points
Posted by Alexandra Velez
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points

How do I remove the gap between image and headline in CSS?

Video Screenshot http://somup.com/cYeubp1biR

There's a tiny bit of space between the image and the headline.

I don't see anything in the HTML or CSS that would purposely create space between these two elements.

What's the best way to remove the gap between the image and the text?

.section-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px 0px;
}
.featured-image {
    cursor: pointer;
}
.main-headline {
    text-align: left;
    background-color: #ffffff;
    padding: 24px 136px;
    margin: 0px -24px; 
}
h1 {
    font-family: "open sans"; 
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    font-size: 48px;
    line-height: 52px;
    font-weight: 800;
    color: #01385e; 
    text-align: left;
    margin-left: 0px;
    margin-top: 0px;
    }
Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Only the CSS is shown here, but we'd need to see the HTML also to replicate the issue.
Even better, you could make a snapshot of your workspace and post the link to it here.

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

That snapshot doesn't seem complete. The entire "image" directory is missing. Also the HTML links to a stylesheet named "sugar-feed-css.css", but the only one in the snapshot is "home.css".

However, I may have a solution anyway. It appears that the anchor element reserves some extra line height, but since this one contains only an image and no text, you can eliminate it entirely:

.section-1 a { line-height: 0 }
Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

For future reference — In the "File" menu there's an "Upload File" selection you could use to upload the files individually after you make a new folder. You could also upload a file package and unpack it with console commands.

Alexandra Velez
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points
Alexandra Velez
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points

Thank you for providing the CSS recommendation to adjust the line height. It worked beautifully!

Would I have to manually upload the folder to the workspace? Not sure how to upload the images folder to the workspace.