title: Why do bottom padding and bottom margins not help to add vertical spacing between these links?
body: <p>I have a div with links in it. And I'm lining them up one over the other with <code>&lt;br&gt;</code> tags because I couldn't figure out how to add vertical spacingn with CSS. I tried adding a bottom margin and a bottom padding to the a style rule but it didn't seem to have any effect (why?). I could add another <code>&lt;br&gt;</code> tag to separate them more but I have to assume there's a nicer way to do this with CSS that I just haven't been able to figure out.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style type="text/css"&gt;
  html, body 
  {
      height: 100%;
      margin: 0;
      padding: 0;
      font-weight:normal;
      font-size:12pt;
      font-family: Verdana, Arial, Helvetica, serif, sans-serif;
      background:lime;
  }
  
  #linksouter
  {
      margin: 0;
      padding: 0;
      border-style:solid;
      border-width:0px;
      position:absolute;
      top: 0px;
      left: 0px;
      width: 80px;
      background: blue;
      text-align:left;
  }
  #linksinner
  {
      margin: 80px 0 0 .5em;
      width:100%;
      background:fuchsia;
      display:inline;
      height:100%;
  }
  #linksinner a
  {
      color:red;
      text-decoration: none;
      background:yellow;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="linksouter"&gt;
      &lt;div id="linksinner"&gt;
      &lt;a href="#"&gt;1&lt;/a&gt;&lt;br /&gt;
      &lt;a href="#"&gt;1&lt;/a&gt;&lt;br /&gt;
      &lt;a href="#"&gt;1&lt;/a&gt;&lt;br /&gt;
      &lt;a href="#"&gt;1&lt;/a&gt;&lt;br /&gt;
      &lt;a href="#"&gt;1&lt;/a&gt;&lt;br /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>