css:神秘“;“保证金”;

css:神秘“;“保证金”;,css,layout,padding,margin,reset,Css,Layout,Padding,Margin,Reset,每当我有两个元素并排水平排列,并指定了右和/或左填充和/或边距时,元素之间通常会有空间,超出我指定的范围。我希望有人能告诉我如何消除这个空间(没有像负边界这样粗糙的东西) 请注意:我不是在寻找替代的多栏CSS布局技术。我知道有很多这样的问题,这个问题比一个专栏布局问题更严重 下面是a的标记和样式。显示使用Firebug选择的左侧元素。讨论中的神秘空间位于右侧,并标有红色星号。没有包括重置样式,但我插入了Eric Meyers的重置,它没有解决问题 <div id="side-a"&

每当我有两个元素并排水平排列,并指定了右和/或左填充和/或边距时,元素之间通常会有空间,超出我指定的范围。我希望有人能告诉我如何消除这个空间(没有像负边界这样粗糙的东西)

请注意:我不是在寻找替代的多栏CSS布局技术。我知道有很多这样的问题,这个问题比一个专栏布局问题更严重

下面是a的标记和样式。显示使用Firebug选择的左侧元素。讨论中的神秘空间位于右侧,并标有红色星号。没有包括重置样式,但我插入了Eric Meyers的重置,它没有解决问题

    <div id="side-a"> 
           <p>
        Lorem ipsum ....
        </p> 
    </div> 
    <div id="side-b"> 
           <p>
        Nunc dapibus....
        </p> 
    </div>

    <div id="website-footer"> 
           <ul id="legal-information"> 
                  <li>Copyright 2011</li> 
                  <li><a href="#">Privacy Policy</a></li> 
           </ul> 
    </div>

    div#side-a,
    div#side-b {
        display: inline-block;
        width: 200px;
        padding: 17px 17px 0;
    }

    div#side-a {
           vertical-align: top;
    }

    div#side-b {
           background: #999;
    }

    ul {
           padding-bottom: 17px;
           list-style: none outside none;
    }

    ul li {
           line-height: 17px;
           margin-left: 17px;
    }

    div#website-footer ul#legal-information {
           float: left;
    }

    div#website-footer ul#legal-information li {
           border-left: 1px solid #29443C;
           display: inline;
           margin: 17px 0;
           padding-left: 8px;
    }

    div#website-footer ul#legal-information li:first-child {
           border-left: medium none;
           padding: 0 8px 0 0;
    }


乱数假文。。。。

Nunc dapibus。。。。

  • 版权所有2011
a面分区, b侧分区{ 显示:内联块; 宽度:200px; 填充:17px 17px 0; } a面分区{ 垂直对齐:顶部; } b侧分区{ 背景:#999; } 保险商实验室{ 填充底部:17px; 列表样式:无外无; } ulli{ 线高:17px; 左边距:17px; } 部门#网站页脚ul#法律信息{ 浮动:左; } 部门#网站页脚ul#法律信息li{ 左边框:1px实心#29443C; 显示:内联; 利润率:17px0; 左侧填充:8px; } 部门#网站页脚ul#法律信息李:第一个孩子{ 左边框:中等无; 填充:0 8px 0; }
这是很自然的,因为
内联块
。简单的解决方法是消除空白

还有其他基于css的解决方法,例如在正文上设置字体大小为0,但它们并不一致/可靠。但我可能错了。

我更改了此Css:

div#side-a,
div#side-b {
  float: left
  width: 200px;
  padding: 17px 17px 0;
}
并为页脚添加了Css:

#website-footer {
    clear: both;
}
这就解决了这个问题


当我希望元素彼此相邻时,我通常会将它们浮动起来。

谢谢您的评论。如果可能的话,我宁愿不使用float。虽然我自己在过去做过很多次,但它会将元素从页面的正常流程中移除,从而使父元素垂直折叠。所以,它是有效的,但它不是一个可以在所有情况下使用的理想解决方案。我应该用“这个空白是从哪里来的”来表达这个需求——对不起!没关系。我一直是一个用户的浮动超过显示真棒!你是最棒的!非常感谢!链接似乎已断开。是否尝试重置css?你的浏览器可能正在这样做。