html - 带有 CSS 的 div 上不需要的边距

Question

我正在尝试使用 Dreamweaver 和 CSS 格式化网站，但在“左侧”div 上出现不需要的边距，该 div 的长度与容器的长度相同:

<div class="cover"> 
<div class="Header">
  <div class="header_left"><input name="searchbar" type="text" class="header_searchbar" value="Search" maxlength="50">
    <a href="#"><img src="image/search.jpg" width="122" height="344" align="baseline" class="header_search_icon"></a></div>
  <div class="header_center"> <a href="index.html"><img src="image/logo.jpg" width="194" height="81" hspace="53" class="logo"></a></div>
    <div class="header_right">
      <div class="header_right_login"><a href="#">Sign In</a></div>
      <a href="#"><img src="image/lock.jpg" width="11" height="16"></a>
      <div class="header_right_language"> 
        <p><a href="#">Languages</a></p>
    </div>
      </div>  
  </div>

  <div class="Content">
    <div id="hot_bar">
      <div id="left"> <img src="image/left.jpg" alt="" width="33" height="65"></div>
      <div id="center"> content placeholder</div>
    </div>
  </div>

  <div class="footer">
    <ul>
      <li><a href="#">About </a></li>
      <li2>/</li2>
      <li><a href="#">Family</a></li>
      <li2>/</li2>
      <li><a href="#">Privacy Policy</a></li>
      <li2>/</li2>
      <li><a href="#">Terms of Service</a></li>
      <li2>/</li2>
    <li><a href="#">Help</a></li>
    <li2>/</li2>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>
</div>

CSS:

#left {
height: 298px;
width: 54px;
margin: 0px;
padding: 0px;
clear: left;
}
.cover .Content #hot_bar #left img {
margin-top: 125.5px;

}
#center {
height: 298px;
width: 724px;
margin-left: 0px;
float: none;
}
#right {
margin: 0px;
padding: 0px;
clear: right;
height: 298px;
width: 98px;
}
.right {
margin: 0px;
padding: 0px;
clear: right;
height: 298px;
width: 98px;
}
div {
width: 150px;
}
body {
margin: 0px;
padding: 0px;
}

编辑:在 Chrome 的检查元素中看起来像这样:

中文部分是内容占位符。内容部分如下所示:

对不起，格式不好。我对此很陌生。

Answer 1

您应该更改 css 顺序。 body ,div,......,left,... 并添加 !important。里面#left

   /* !important is an optional . */
   #left {
   height: 298px;
   width: 54px;
   margin-left: 0px !important;
   padding-left: 0px !important;
   left:0 !important;
   top:0 !important;
   clear: left;
   }


   .content,#hot_bar{
    margin-left: 0px ;
    padding: 0px 0px;
    clear: left;
    left:0 !important;    
    }

fiddle