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 trialJosiah Swanson
2,589 PointsSpace beneath images
There is an approximately 2px tall space under each of my images. When I set the padding and margin of my image tag to 0, nothing changes. Anyone know what's up?
5 Answers
Adam Bennett
7,663 PointsAlso if all of your images have the same id you should use a class instead. An id is a unique identifier that should only apply to one tag, but a single class can be applied to multiple tags.
Adam Bennett
7,663 PointsAlso, and maybe this just didn't make it to the post, but when writing rules for your classes and IDs in your style sheet don't forget the # for IDs, ex. #container {}, and the . for classes, ex. .container {}.
Ricky Walker
12,863 PointsHi Josiah. It would help a bit if you could link sections of your code but I'm going to see if I can ask a few questions that might help out. How are you displaying each of your images? Are they nested inside of <li>
or <ul>
tags? It could also be the margins of other elements around your images causing the space.
Josiah Swanson
2,589 PointsEach image is a list item with the id "img", and all of the images are in an unordered list defined as #home. The unordered list is in a container called #container. The CSS I applied is:
container {
max-width: 700px; margin: 0 auto; padding: 0; }
home {
list-style: none; margin: 0; padding: 0; }
img { margin: 0; max-width: 100%; padding: 0; }
Thanks for the help!
Pav Cieslak
808 PointsJosiah, what i could recommend is to inspect your image and dig a bit deeper. Check your margins and paddings there and make it a starting point. Thanks to that u will know whether your selectors do work or not, if yes at least u will know 100% that the problem is somewhere else and by sharing that it would be easier for people on this forum to help you out.
Remember the box model ? Happy debugging. (theres no better rewards than bbeing able to find that problem on your own without an obvious solution being given by someone else)
take care!
Josiah Swanson
2,589 PointsEach image is a list item with the id "img", and all of the images are in an unordered list defined as #home. The unordered list is in a container called #container. The CSS I applied is:
container {
max-width: 700px; margin: 0 auto; padding: 0; }
home {
list-style: none; margin: 0; padding: 0; }
img { margin: 0; max-width: 100%; padding: 0; }
Thanks for the help!
Josiah Swanson
2,589 PointsHey everybody! I solved my problem! Thanks for all the help! The solution was to vertically align my images. There was a default margin under each image to make sure the viewer could determine the break between images. I don't necessarily need this auto margin so this was my solution: img { vertical-align: middle; }
Pav Cieslak
808 PointsWell done !
Josiah Swanson
2,589 PointsJosiah Swanson
2,589 PointsThanks!