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 trialandy guo
3,350 Pointsdisplay: block makes blank space clickable after the item. Why do we want this?
.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }
The display: block function creates blank space after the text that fills the line in the page making a blank line clickable. When the window is wide, the blank space can be accidentally clicked. why do we code it like this?
2 Answers
Flavio Carvalho
26,636 PointsI could be wrong but I think you're creating a link <a> that's 20px high with a background filling 20px of its height, plus a padding of 30px on the bottom. So basically, your <a> background is not covering the padding, but it is still a link, and thus it's clickable. If the idea is for non-clickable space on the bottom use margin instead.
Barbara Wiacek
9,901 PointsI noticed that too. This should definitely not stay like this! Your solution to use "inline-block" instead works very well though! :)
I tried doing it without the "display: block" funcion at all, but then the margin at the bottom of the link doesn't appear, so that the lines of the contact details remain close together and look bad.
andy guo
3,350 Pointsandy guo
3,350 Pointsi changed block to inline-block and it seems to have kept all the same margin and background formatting and no more clickable blank space