title: Why is display:block necessary when there is a image background?
body: <p>The logo display well with the code below, </p>
  
  <p>but I don't know How the code <code>display:block</code> works here? </p>
  
  <p>I know if I don't use the code the text will overlap the image(the logo), but I don't understand, why is display:block can solve this?</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;h1&gt;&lt;a href="#"&gt;WebsiteName&lt;/a&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>#header h1 a {
  background: url(images/logo.jpg) no-repeat;
  height: 21px;
  width: 197px;
  display: block;/* How this works? */
  text-indent: -9999px;
  }
  </code></pre>