HTML要素のscroll系プロパティ

JavaScriptでアクセスできるHTML文書内の要素のプロパティに，「scroll...」というものがあります．それらの意味を図でまとめてみました．

これを見ると，marginとpaddingの役割が見えてきますね．両者の違いは，borderの内と外というのではなく，要素が持つ内容の外側につくのがpaddingで，要素の外側につくのがmarginなんですね．

参考資料

[1] element.scrollLeft
[2] element.scrollTop
[3] element.scrollWidth
[4] element.scrollHeight