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

mukul lohia
mukul lohia
985 Points
Posted by mukul lohia
mukul lohia
985 Points

why display:block is used here

why display:block is used here

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Where? the video is 11min long.

3 Answers

Marcin Lubke
Marcin Lubke
13,253 Points
Marcin Lubke
Marcin Lubke
13,253 Points

I think you mean this section of the code:

.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;
}

It is used here, because links are inline elements by default, and here you want to have some more vertical space between them. If you leave them as inline elements, "min-height" and/or top and bottom margins would have no effect on your links.

mukul lohia
mukul lohia
985 Points
mukul lohia
mukul lohia
985 Points

but without it i am getting same thing can i leave it in my code

Marcin Lubke
Marcin Lubke
13,253 Points
Marcin Lubke
Marcin Lubke
13,253 Points

It's not the same. With only 20px it's hardly noticeable, but it's there.

Try changing min-height value to, let's say 100px. Refresh your page - now the vertical space between your links are bigger. Then comment-out your display property, or change it to inline and space between them resets to line height.