要素の幅、高さに対し、パディング、ボーダー、マージンが順に外側を包むようになりますが、
その要素をTop、Leftで配置しようとした場合、ボーダーの左上端が配置原点になる。
例
<!doctype html> <meta charset="utf-8" /> div in div and border</pre> <div style="position: relative; margin: 10px auto; width: 100px; height: 100px; background-color: #ff0;"> <div style="position: absolute; width: 50px; height: 50px; background-color: #666; top: 20px; left: 20px;"> <img style="border: #000 solid 10px;" alt="" src="mark16.png" /></div> </div> <pre>
ボーダー付き要素のTop、Left配置