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

Posted by Bilal Junaidy
Bilal Junaidy
1,775 Points

The significance of the padding property in this video

In this video Nick added padding the links with the following code a { padding: 0 0 0 30px; } This added 30px of padding on the left. Now could someone please explain me whether the padding is added to the icons or to the text on the side of the icon or both.

8 Answers

Jason Cook
Jason Cook
11,403 Points
Jason Cook
Jason Cook
11,403 Points

In this particular case, only elements inside the <a>...</a> tags will be affected by the padding property defined in the .contact-info a { ... } CSS code block. You can validate this by setting the padding from 30px to 0px then refreshing--you will immediately see that the text inside the <a> tag will now appear on top of the small icons to the left.

First, make sure you you have a section in your contact.html that looks like this (below)

(contact.html)

      <ul class="contact-info">
        <li class="phone"><a href="tel:123-555-1234">555-555-1212</a></li>
        <li class="mail"><a href="mailto:yourname@mailprovider.com">name@youremail.com</a></li>
        <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=twitteruser">Twitter (@twitteruser)</a></li>
      </ul>

Now, modify your main.css stylesheet to remove all padding, such as in the below example, then refresh again. You will notice after making this change that the text inside the anchor tags now moves back to the left 30px since the padding has been removed. The text should be overlapping the small icons to the left at this point.

(main.css)

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0;
  margin: 0 0 10px;
}

I hope this answers the question. The last point is that the small icons to the left of the text were not affected since they are outside of the <a> tags. The styles for those elements are defined in .contact-info li.phone a { ... }, .contact-info li.mail a { ... }, and .contact-info li.twitter a { ... }.

Let me know if I can be of additional help.

Jason Cook
Jason Cook
11,403 Points
Jason Cook
Jason Cook
11,403 Points

I'll try to address these in order. The background-size sets to size to be squared 20px X 20px (top & bottom / left & right). This applies directly to the background of the "a" selector of the .contact-info class (i.e. ".contact-info a"). The min-height is defined to ensure that each list item will have a minimum height of 20px no matter what. You can try setting it to 50px and watch what happens.

To answer the second question, the reason why the background images were added using ".contact-info.li.phone a" is to bind the background image with the anchor element which also makes the entire background image clickable (as in the example below). 

     <ul class="contact-info">
        <li class="phone"><a href="tel:123-555-1234">555-555-1212</a></li>
        <li class="mail"><a href="mailto:yourname@mailprovider.com">name@youremail.com</a></li>
        <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=twitteruser">Twitter (@twitteruser)</a></li>
      </ul>

Let me know if I missing something or didn't cover it completely.

Juliana Rebelo Marques Doraciotto
Juliana Rebelo Marques Doraciotto
8,261 Points
Juliana Rebelo Marques Doraciotto
Juliana Rebelo Marques Doraciotto
8,261 Points

The padding was added to the text, more specifically to the left side os the link (text). Take a look in the code and you will see that the selector is ".contact-info a", which means that all the links (texts) were selected.

Bilal Junaidy
Bilal Junaidy
1,775 Points
Bilal Junaidy
Bilal Junaidy
1,775 Points

so basically all of the css using the ".contact-info a" selector was applied to the text? If that is the case then why did they specify background-size and background-height applied within the same ".contact-info a" selector?

Bilal Junaidy
Bilal Junaidy
1,775 Points
Bilal Junaidy
Bilal Junaidy
1,775 Points

that did help a little but now the background images are confusing me. could you explain me the use of the following property in this video

  1. background-image
  2. background-size
Bilal Junaidy
Bilal Junaidy
1,775 Points
Bilal Junaidy
Bilal Junaidy
1,775 Points

what I mean to ask is that are the background-size, min-height in any way affecting the size of the images OR are they only acting on the links (text)? and why did Nick add the background images using the following selector .contact-info li.phone a {...} and why not .contact-info li.phone {...}

Bilal Junaidy
Bilal Junaidy
1,775 Points
Bilal Junaidy
Bilal Junaidy
1,775 Points

That makes sooo much sense. Thanks Jason and Jullana. I really appreciate the help

Juliana Rebelo Marques Doraciotto
Juliana Rebelo Marques Doraciotto
8,261 Points
Juliana Rebelo Marques Doraciotto
Juliana Rebelo Marques Doraciotto
8,261 Points

Thanks Jasom, that helped me a lot as well. =)