Вот код, может я что не понимаю,  но почему левая стрелка не прижимается с помощью margin-bottom?
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style>
      .block {
        display: block;
        margin: 0 auto;
        width: 475px;
        height: 215px;
      }
      .block img {
        position: absolute;
      }
      .bLeft { 
        display: inline-block;
        background-image: url(img/bleft.png);
        width: 38px;
        height: 38px;
        position: relative;
        margin-bottom: 20px;
      }
      .bRight {
        background-image: url(img/bright.png);
        width: 38px;
        height: 38px;
        position: relative;
        float: right;
      }
    </style>
    <script>
      var num = 1;
      function bLeft () {
        num--;
        if (num < 1) num = 3;
        document.images [0].src = 'img/b' + num + '.jpg';
      }
      function bRight () {
        num++;
        if (num > 3) num = 1;
        document.images [0].src = 'img/b' + num + '.jpg';
      }
    </script>
  </head>
  <body>
    <div class="block">
    <img src="img/b1.jpg">
    <span class="bLeft" onclick="bLeft ()"></span>
    <span class="bRight" onclick="bRight ()"></span>
    </div>
  </body>
</html>