围绕盒子技术的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盒子

回答

相关问题