Question

我试图制作一个包含内容的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分钟才做到这一点，我仍然无法做到:(

我知道实现相同结果的方法是在一个盒子周围设置边框。但我只是想在盒子背景颜色技术周围学习这个盒子。

提前谢谢

Answer 1

最一致的是使用填充而不是边距。

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

Answer 2

您必须知道布局的工作原理！在内部使用边距将工作或在外部填充将起作用。请记住，在对元素应用边距，边框或填充时，它们按此顺序排列。（边距包裹边框，包裹填充，包裹元素。）

下面是使用内边距在框边框周围创建一个框。

<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>

Answer 3

在border: 2px solid #fff;上应用#outer可以解决问题。然后你可以摆脱#inner，因为它是多余的。

但如果你坚持使用两个DIV，你想要做的就是删除height＆amp; width个语句并将margin: 2px;应用于#inner。这样就可以看到#outer background-color的2个像素。

箱子周围的CSS框技术

3 个答案: