如何修复两个div之间的自动保证金?

时间:2014-01-04 05:10:02

标签: css html

我想解决的#Content-header和#sub-header之间存在差距。这是Css代码。我想删除两个div之间的垂直边距。可以在提供的JSfiddle链接中检查html代码。

CSS:

#content{
    float: right;
    width: 799px;
    overflow: auto;
    font-size: 14px;font-size: 1.4rem;
    font-weight: bold;
}

#content-header{
    background-image: url("../images/content-header.png");
    background-repeat: repeat-x;
}
#content-header ul{
    padding: 10px 0 15px 30px;    
}
#content-header ul li{
    background-image: url("../images/filter-back.png");
    background-repeat: repeat-x;
    border: 1px solid #BBB;
    list-style: none;
    display: inline-block;
    padding: 5px;
}
#sub-header ul{ padding-left: 0;}
#sub-header ul li{
    /*background-image: url("../images/sub-header.png");
    background-repeat: repeat-x;*/
    list-style-type: none;
    display: inline;
}

JSFIDDLE

CSSDeck

3 个答案:

答案 0 :(得分:0)

如果您想减少任何区域的保证金,请使用保证金属性和!important

 #content-header{
     margin: 0 !important;
 }

答案 1 :(得分:0)

如果您创建了一个JsFiddle示例,我们可以更好地评估该问题,但如果您尝试同时给#content-header和#sub-header一个边距:0;然后,您可以重置用户代理的默认边距值。

#content-header,
#sub-header {
     margin:0;
     padding:0;
}

最好使用css重置文件开始HTML / CSS页面,该文件将获取所有主要html元素并将其边距和填充重置为0(以及其他属性)。这样你就不会出现意想不到的边距和填充,你可以对你的风格的浏览器进行最终控制。

我喜欢使用的好的集合css重置来自:http://www.cssreset.com/

答案 2 :(得分:0)

您可能需要清除这两个容器,因为您正在使用浮动。

尝试将clear: both; overflow: hidden;添加到#content-header元素。

此外,您应该使用<span class="switch"...</span>标记包裹<li></li>