Home/ Questions/Q 759241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T15:34:20+00:00

I was trying to make an CSS division box with content in it as

  • 0

I was trying to make an CSS division box with content in it as well as a border around it.

Instead of using the box-border technique, I was trying out a new box to box technique instead.

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

Somehow the borders are just not showing up right with FireFox.

I tried everything. Setting up the Paddings of both boxes, margin, and messing around with the width.

TO be honest, it took me around 30min to do this and I still can’t get it right 🙁

I know that a way to achieve the same result would be setting up a border around just one box. But I just wanna learn this box around box background-color technique.

THanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What seems to work the most consistently is to use padding instead of margin.

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