ansaurus

Question

Answer 1

A:

Applying border: 2px solid #fff; on #outer solves the problem just fine. Then you can just get rid of #inner, since it's redundant.

BUT if you insist on using two DIVs, what you want to do is remove the height & width statements and apply margin: 2px; to #inner. This will allow 2 pixels of #outer's background-color to be visible.

Tim Hettler 2010-04-29 18:48:07

Answer 2

+3 A:

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

Joel Potter 2010-04-29 18:50:26

Thanks sir.This solves the problem in both IE and FF.So you are suggesting that margin is no good in a technique like this? Or is it just inconsistent. Logically speaking, margin should work. Especially in FF which surprising is the browser that causes problems.

Dennis D 2010-04-29 18:58:14

@webzide. I'm not sure why the top margin is not applied in FF (it has the same problem in webkit). Interestingly, if you apply `overflow:auto;` to the outer div, margin functions as expected (example: http://jsbin.com/ivofa4/edit). I would prefer to use padding anyway since I don't always want `overflow:auto`.

Joel Potter 2010-04-29 19:51:18

Answer 3

+1 A:

You must know how the layout works! Using margin on the inner would work or padding on the outer would work. Remember when applying margins, borders or padding to the element, they are layed out in that order. (The margin wraps the border, which wraps the padding, which wraps the element.)

Below is using the inner margin create a box around a box border.

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

John Hartsock 2010-04-29 18:54:06

It works ok in IE allright but not in firefoxIn firefox the top 2 "borders" are not showing up

Dennis D 2010-04-29 18:56:16

strange firefox only likes the padding technique.

John Hartsock 2010-04-29 18:59:39

Thanks for your help sir

Dennis D 2010-04-29 19:17:49

ansaurus

tags:

views:

answers:

CSS box around box technique

related questions