#D1 {
	position:absolute; left:0; top:0; 
	width:100; height:100;
	border-width:2;

	border-color:red; border-style:solid; 
	background-color:yellow; 
	layer-background-color:yellow;
}
<span id=D1><img src="100x100.jpg" width="100" height="100"></span>


border-width:2 ·Î ·¹À̾îÀÇ border¸¦ 2px·Î ÁöÁ¤À» Çß½À´Ï´Ù. ·¹À̾îÀÇ »ç¸é¿¡ 2pxÀÇ Å׵θ®¸¦ ÀÔÈü´Ï´Ù. ÀÌ border´Â ·¹À̾îÀÇ Å©±â¿¡ Æ÷ÇÔÀÌ µË´Ï´Ù. ie4´Â ¾çÂÊ border¸¦ ´õÇØ¼­ 2x2·Î µÇ¾î 4°¡ ´õ Å®´Ï´Ù. document.all.D1.offsetWidth, document.all.D1.offsetHeight°¡ 104°¡ µË´Ï´Ù.

¹Ý¸é¿¡ document.all.D1.clientWidth, document.all.D1.clientHeight ´Â ¿©ÀüÈ÷ 100ÀÔ´Ï´Ù. borderÀÇ Å©±â¸¦ ÀÐÁö ¾Ê½À´Ï´Ù. Áï, border°¡ ¾ø´Â ·¹À̾î´Â offset, client µÑ ´Ù »ç¿ëÇÒ ¼ö ÀÖÁö¸¸, border°¡ ÀÖ´Ù¸é offset·Î ·¹À̾îÀÇ Å©±â¸¦ Àоî¾ß ÇÕ´Ï´Ù. ±×·¡¾ß border Å©±â¸¸Å­ Â÷À̰¡ ³ªÁö ¾Ê½À´Ï´Ù.

nn4¿¡¼­´Â ·¹À̾ border°¡ ÀÖ´Ù¸é document.D1.document.width, document.D1.document.height°¡ borderÀÇ Å©±â¸¦ Æ÷ÇÔÇÕ´Ï´Ù. ±Ùµ¥, nn4¿¡¼­ ·¹À̾ border°¡ ÀÖ´Ù¸é border¿Í ³»¿ë¹° »çÀÌ¿¡ 3pxÀÇ Æ´ÀÌ °¢ »ç¸é¿¡¼­ ¹ú¾îÁý´Ï´Ù. (ÂüÁ¶Çϱâ)

±×·¡¼­ borderÀÇ Å©±â 2¸¦ ¾çÂÊÀ¸·Î ÇØ¼­ 4, Æ´ÀÇ Å©±â 3À» ¾çÂÊÀ¸·Î ÇØ¼­ 6À» ´õÇØ¼­ ³ª¿É´Ï´Ù. ±×·¡¼­ ·¹À̾îÀÇ Å©±â´Â 110 À¸·Î µË´Ï´Ù. nn4¿¡¼­ document.width, dowument.height ´Â ³»¿ë¹°ÀÇ Å©±âÀÔ´Ï´Ù. ÆäÀÌÁö³ª ·¹À̾ °¡Áö°í ÀÖ´Â ³»¿ë¹°ÀÇ Å©±âÀÔ´Ï´Ù.

·¹À̾î.document.width, ·¹À̾î.document.height ´Â ·¹À̾ border°¡ ÀÖ´Ù¸é Àüü ·¹À̾îÀÇ Å©±â¸¦ ³ªÅ¸³À´Ï´Ù. ÇÏÁö¸¸ border°¡ ¾ø´Ù¸é ³»¿ë¹°ÀÇ Å©±â¸¸À» ³ªÅ¸³À´Ï´Ù. ±×·¡¼­ ·¹À̾îÀÇ width ¿¡ µû¶ó¼­ ±ÛÀÚµéÀÌ ÁٳѱèÀ» ÇÑ´Ù¸é ·¹À̾î.document.width, ·¹À̾î.document.height ÀÇ °ªÀº ´Þ¶óÁú ¼ö ÀÖ½À´Ï´Ù.

BACK