CSS保证金问题

我的CSS看起来像这样CSS保证金问题

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    background-color: #FFFFFF; 
} 
div#header { 
    background-color: #969696; 
    height: 80px; 
} 
div#mid-bar { 
    background: url(images/home.jpg) left no-repeat #6f6565; 
    height: 200px; 
} 

#searchbox { 
    background-color: #c1c1c1; 
    width: 200px; 
    height: 180px; 
    margin: 10px 20px 10px 350px; 
}

和我的HTML

<div id="header"> 

    </div> 
    <div id="mid-bar"> 
     <div id="searchbox"> 

     </div> 
    </div>

preview

你可以看到这个问题。标题和中间酒吧之间的空间，由于搜索框div中给出的余量而创建。我希望搜索框在mid-bar div内，而不是头部div。

来源

2010-10-27 booota

您正在测试哪个浏览器？这是一个奇怪的问题。 – Kyle 2010-10-27 11:29:44

是的。如果我们在firefox atleast中正确呈现#searchbox之前的＃mid-bar中添加偶数空间[ ]。 – 2010-10-27 11:32:59

@凯尔Sevenoaks ...火狐和IE 都显示相同的 – booota 2010-10-27 11:44:30

我是一个众所周知的bug：将使用填充代替保证金。所以：

div#mid-bar { 
    background: url(images/home.jpg) left no-repeat #6f6565; 
    height: 200px; 
padding-top: 10px; 
} 


#searchbox { 
    background-color: #c1c1c1; 
    width: 200px; 
    height: 180px; 
    margin: 0px 20px 10px 350px; 
}

来源

2010-10-27 11:31:31 pixeline

已经填补了空白...直到现在这么好......但其他出错了。 background：url（images/home.jpg）left no-repeat＃6f6565 image.jpg home.jpg的高度为200px。由于填充应用于中间条纹时的背景颜色，我有6f6565的颜色，我的图像在200px的高度被剪切。其余10px的填充高度填充背景颜色:( – booota 2010-10-27 11:36:21

给搜索框的高度：190px; – pixeline 2010-10-27 12:30:32

给填充到＃中旬吧，而不是搜索框缘

来源

2010-10-27 11:30:31

我已经看到这种情况发生时，你不给利润率父母的第一要素，甚至你给保证金，通过创造利润引起家长的差距孩子。我克服这一点的一种方法是在父容器上使用填充而不是边距。

与垫衬见你的例子这里：http://jsbin.com/ememi3

来源

2010-10-27 11:33:02

如果您使用的利润率意图，尝试＃设置margin:0;中旬吧。否则，给＃mid-bar一个padding-top:10px;并从#searchbox中删除顶部边距。

来源

2010-10-27 11:40:59 Freyr

大家似乎都认同这个问题，填充效果会更好，然后利润率会更高。我对此进行了一点研究，看来Pixeline是正确的，这是Firefox中的一个已知错误，希望他们能够在4中修复它。

来源

2010-10-27 17:52:49 Blake

填充调整工作正常，虽然在中间栏指定的图像有问题，例如 background：url（images/home .jpg）left no-repeat＃6f6565; 这张图片高度为200px，我把它改成了220px的高度，这样填充的空间就可以填充了，这是我调整问题的方法 – booota 2010-10-29 04:56:21

这应该可行，高兴你的问题修复。 – Blake 2010-10-29 19:39:22

CSS保证金问题

回答

相关问题