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

HTML How to Make a Website Adding Pages to a Website Add Iconography

andy guo
andy guo
3,350 Points
Posted by andy guo
andy guo
3,350 Points

display: 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?

andy guo
andy guo
3,350 Points
andy guo
andy guo
3,350 Points

i changed block to inline-block and it seems to have kept all the same margin and background formatting and no more clickable blank space

2 Answers

Flavio Carvalho
Flavio Carvalho
26,636 Points
Flavio Carvalho
Flavio Carvalho
26,636 Points

I 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
Barbara Wiacek
9,901 Points
Barbara Wiacek
Barbara Wiacek
9,901 Points

I 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.