CSS 热点和居中问题

Question

我在创建网站的过程中遇到了一个我不知道如何解决的问题，网站上有一个中心有热点的矩形图像，我使用了以下 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%;
                }

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

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

我哪里出错了，我该如何实现？

编辑 - 我创建了 JsFiddle 版本，所以你可以明白我的意思，黑色代表整个图像，浅绿色代表热点，我需要整个 block (黑色和浅绿色)向下移动 20 个像素，同时仍然保持居中和可扩展。

链接到 JSFIDDLE - http://jsfiddle.net/cT3Eu/

谢谢。

Answer 1

我已经在 IE7、8、9、当前的 Firefox 版本和当前的 Chrome 版本中对其进行了测试，并且为 #image_map 添加 margin-top: 20px; 有效对我来说很好:http://jsfiddle.net/cT3Eu/1/