Why does the text move if I say 30px padding to the left for the icon?

Hi both,

I'm assuming that we are talking about this bit of HTML & CSS from the course.

      <section>
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

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

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}

The 3 anchor elements are set to use a non repeating, 20px square background image. So the image appears once on the far left of the anchor element and as it is a background image it appears behind the text. 30px of padding is added to each of the anchor elements, The background image is not affected by the padding but the text is.

"Finally we've set the padding. For the padding we want lots of extra space on the interior of the element's left side because that's where our images are going to go, on the left side of these links. So it will push the text over to the right because there's padding on the left and that will give the images a place to be displayed."

Because you are making more space in the inner space of the icon that pushes it 30px away , margin would do the same but form outside. Do you know how margin and padding works?