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保證金問題

回答

相關問題