首页 文章

箱子周围的CSS框技术

提问于
浏览 次
1

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

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

提前致谢

html css

3 回答

  • 0

    似乎最有效的方法是使用填充而不是边距 .

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

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

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

    <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>
    回复于
  • 3

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

    但如果你坚持使用两个DIV，你想要做的是删除 height ＆ width 语句并将 margin: 2px; 应用于 #inner . 这将允许显示2个像素的 #outer 的 background-color .

    回复于

相关问题