思った通りにうごいてくれません・・・

divを2つ作って内側divを外側divの中で中心に配置したくて、
<head>
<style>
body{
background:lightcyan;
}
#a{
width:600px;
height:400px;
background:silver;
margin:auto;
border:1px solid black; /* 相殺無効 */
}
#b{
margin:5%;
width:90%;
height:90%;
background:white;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
</div>
</body>
こんなHTMLを用意
外側を600*400pxにして
marginを5%全方向に、widthとheightを90%にしてます
上右下左のmarginが30px,20px,30px,20pxとなって内側が540*360となるのを期待したんですが

aimg


こうなりました
なんか上のほうが大きく下が小さくなっていて中央に来てないです
Chromeの要素の検証から詳細を見てみると

aMetrics

縦横で長さが違うはずなのに全部統一で30px
30pxというと横のmarginの期待する値

長いほうが優先なのかと思って外側のdivのwidthとheightを逆にしてみる

#a{
width:400px;
height:600px;
background:silver;
margin:auto;
border:1px solid black; /* 相殺無効 */
}

結果は

a2img

今度は上marginが小さい

a2Metrics

全方向が20pxです
長い方に合わされるのじゃなくてwidthに合わされるようです
marginじゃなくpaddingでも親のwidthに合わされます

どうしてここだけ親要素を引き継いでくれないの!

この場合は、
margin:20px 30px;
margin:30px 20px;
とか書けばいいだけなんですが
外側もパーセント指定されてることが多いのでピクセル指定はしたくないんです

とりあえず
<head>
<style>
body{
background:lightcyan;
}
#a{
width:600px;
height:400px;
background:silver;
margin:auto;
position:relative;
}
#b{
width:90%;
height:90%;
background:white;
position:absolute;
left:5%;
top:5%;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
</div>
</body>
こうするとことでパーセント指定使って解決
あんまりpositionを使いたくないんだよなー… 
 
bimg
bMetrics