scrollWidth offsetWidth offsetHeight offsetLeft .....

function init(){
	
		 var a = document.getElementById("a");
		 a.innerHTML +="scrollWidth :"+ a.scrollWidth  +"<br/>"
		             + "scrollHeight :" + a.scrollHeight +"<br/>"
					 + "offsetWidth :" + a.offsetWidth +"<br/>"
					 + "offsetHeight :" + a.offsetHeight +"<br/>"
					 + "clientWidth :"+  a.clientWidth  +"<br/>"
					 + "clientHeight :"+  a.clientHeight  +"<br/>"
					 + "offsetLeft: "+a.offsetLeft+  "<br/>"
					 + "offsetTop: "+a.offsetTop
					  
 
	}

 

<div style="width:3600px ; height:600px; position:absolute; top:100px">
  <div style="width:300px ; height:200px; background:#CCCCCC; border: 1px ;padding:10px ; margin:3px;  position:absolute; top:2px; border:7px #000000 solid" id="a"  ></div>
 </div>

 IE
scrollWidth :20scrollHeight :39offsetWidth :300offsetHeight :200clientWidth :286clientHeight :186offsetLeft: 3offsetTop: 5
 
IE에서 border + clientWidth = width
 
 
FF:
 
scrollWidth :334scrollHeight :234offsetWidth :334offsetHeight :234clientWidth :320clientHeight :220offsetLeft: 3offsetTop: 5
 
FF에서:
    clientWidth  = width + padding