圍繞盒子技術的CSS盒子

我試圖製作一個帶有內容的CSS分隔盒以及圍繞它的邊框。圍繞盒子技術的CSS盒子

取而代之的是使用盒子邊框技術，我嘗試了一種新的盒子技術來代替。

<html> 
<head> 
    <style type="text/css"> 
    #outer{ 
    height: 20px; 
    width: 20px; 
background-color:#233D78; 


    } 
    #inner{ 

height:18px; 
width: 18px; 
    background-color: #FFF; 

    font-size: 1em; 
    text-align:center; 
    font-family:'Bookman Old Style', serif; 
    padding: 0px; 
    margin-top: 1px; 
    margin-right:auto; 
    margin-left:auto; 
    margin-bottom:1px; 
    vertical-align:middle; 

     } 
    </style> 
</head> 
<body> 
<div id="outer"><div id="inner">TEXT</div></div> 
</body> 
</html>

不知何故，邊界只是不顯示正確的FireFox。

我嘗試了一切。設置兩個盒子的邊距，邊距，以及寬度。

說實話，我花了30分鐘左右要做到這一點，我仍然無法得到它的權利:(

我知道的方式來達到同樣的效果將設立周圍的邊框只有一個框。但我只是想了解周圍框的背景色技術，此框。提前

來源

2010-04-29 Dennis D

似乎最有效的工作是使用填充而不是邊距。

#outer { 
    width:18px; 
    height:18px; 
    padding:1px; 
    background-color:#233D78; 
} 
#inner { 
    width:18px; 
    height:18px; 
    background-color:#fff; 
}

來源

2010-04-29 18:50:26 Joel

謝謝先生。這解決了IE和FF中的問題。所以你建議在這樣的技術中保證金不好？或者它只是不一致。從邏輯上講，保證金應該起作用。特別是在FF中令人驚訝的是導致問題的瀏覽器。 – 2010-04-29 18:58:14

@webzide。我不知道爲什麼頂部邊距不適用於FF（它在webkit中有同樣的問題）。有趣的是，如果將'overflow：auto;'應用於外部div，則margin的功能與預期相同（例如：http://jsbin.com/ivofa4/edit）。無論如何，我寧願使用填充，因爲我並不總是希望'overflow：auto'。 – Joel 2010-04-29 19:51:18

應用border: 2px solid #fff;上#outer解決問題就好了。然後，你可以擺脫#inner

感謝，因爲它是多餘的。

但是如果你堅持使用兩個DIV，你想要做的是刪除height & width陳述並將margin: 2px;應用到#inner。這將允許#outer的background-color的2個像素可見。

來源

2010-04-29 18:48:07

您必須知道佈局如何工作！在內部使用邊界將工作或外部填充工作。請記住，在爲元素應用邊距，邊框或填充時，會按照該順序進行佈局。（邊緣包裹邊框，它包裹填充物，包裹元素。）

下面是使用內邊距在框邊框周圍創建一個框。

<html> 
<head> 
    <style type="text/css"> 
    #outer{ 
    height: 20px; 
    width: 20px; 
background-color:#233D78; 


    } 
    #inner{ 


    background-color: #FFF; 

    margin: 2px; 
     } 
    </style> 
</head> 
<body> 
<div id="outer"><div id="inner">TEXT</div></div> 
</body> 
</html>

來源

2010-04-29 18:54:06

它可以在IE瀏覽器中正常工作，但不在Firefox中在Firefox中，頂部2「邊框」沒有出現 – 2010-04-29 18:56:16

奇怪的Firefox只喜歡填充技術。 – 2010-04-29 18:59:39

謝謝你的幫助先生 – 2010-04-29 19:17:49

圍繞盒子技術的CSS盒子

回答

相關問題