html - 为什么顶部切片和中间切片有间隙

Question

我有这两页

http://slacklog.heroku.com/
http://slacklog.heroku.com/signup/date

正如您所看到的那样，顶部和中间以及底部和中间图像之间存在间隙....

这是我的html

<div class="content" align="center">
<div class="slacklog_log"></div>
<div class="main_column_section">
    <div class="wide_box_top"></div>
    <div class="wide_box_body" id="main_content_body">  
        <div id="white">
            <div class="wide_box_top_white"></div>
            <div class="wide_box_body_white">   
            <!-- unique per page -->
            <!-- stuff -->
            </div>
            <div class="wide_box_bottom_white"></div>
        </div>
    </div>          
    <div class="wide_box_bottom"></div>
</div>
</div><!--content-->

如果还有什么我可以给你帮助你帮助我....顺便说一句。我寻找填充或边距，但我在 Firebug 中根本看不到它......提前致谢

Answer 1

我已经通过应用以下样式设法修复它:

#white {
  width: 650px;
  margin: 0 auto;
}

.wide_box_top_white {
  background: url("/images/white_top.png") no-repeat scroll 0 0 transparent;
  height: 9px;
  float: left;
  width: 650px;
  display: block;
}

.wide_box_body_white {
  background: url("/images/white_middle.png") repeat-y scroll 0 0 transparent;
  float: left;
  width: 650px;
  display: block;
}

.wide_box_bottom_white {
  background: url("/images/white_bottom.png") no-repeat scroll 0 0 transparent;
  height: 10px;
  float: left;
  display: block;
  width: 650px;
}

请注意，您不需要所有这些添加的样式，但它们不会损害它。我主要在#white div 中的类中添加了float: left、width: 650px 和display:block....

您还可以做很多事情来改进总体结构。例如，我真的不建议像您在 .wide_box_body_white 类中那样使用图像来影响白色背景，最好摆脱 .wide_box_bottom_white 和 .wide_box_top_white 类，只给 .wide_box_body_white 一个边框半径。 ...