CSS热点&；中心问题

我在创建网站的过程中遇到了一个我不知道如何解决的问题，在网站上有一个中心有热点的矩形图像，我使用了以下css代码-

 #image_map  
    {
        display: block;   margin-left: auto;   margin-right: auto; 
        width:302px;
        height:65px;
        background:url(Images/ManordLogo.png) no-repeat;
        position:relative;
        }
        #image_map a
        {
            display:block;
            position:absolute;
            }

            #image_map a#link1
            {
                width:42px;
                height:49px;
                top:11%;
                left:43%;
                }

第一行使图像居中并允许页面可缩放，下面的代码定义并创建热点。一切正常，热点和图像保持在正确的位置，但是在设计方面，我需要图像比页面顶部的当前位置低20像素。 每次我尝试使用边距、填充或任何形式的定位时，图像都会跳到页面的右上角，我不知道为什么

我需要图像和热点保持不变，热点的位置保持相对，无论浏览器窗口大小如何，但对于设计，我需要图像向下移动20px

我错在哪里？我如何才能做到这一点

编辑-我已经创建了JSFIDLE版本，所以你可以看到我的意思，黑色代表整个图像，浅绿色代表热点，我需要整个块（黑色和浅绿色）向下移动20像素，同时仍然保持居中和可缩放

链接到JSFIDDLE-

---

多谢各位

我已经在IE7、8、9、当前Firefox版本和当前Chrome版本中进行了测试，添加了

margin top:20px

for

#image\u map

对我来说很好：

你可以用jsfiddle试试这个例子。？？我不太清楚你的意思，你的意思是把它放进jsfiddle给你一个我的意思的例子，还是？我一定是做错了什么，我想我只是把页边空白放在了错误的地方？谢谢。