html element offsetWidth, clientWidth


//=== http://www.w3schools.com/jsref/prop_element_clientwidth.asp
"""...
The clientWidth property returns the viewable height of an element
in pixels, including padding, but not the border, scrollbar or margin.
..."""


//=== http://www.w3schools.com/jsref/prop_element_offsetwidth.asp
"""...
The offsetWidth property returns the viewable width of an element
in pixels, including padding, border and scrollbar, but not the margin.
..."""


//=== http://www.w3schools.com/css/css_boxmodel.asp

css box :
from outside toward inside
margin --> border --> padding --> content

the 'width' in css style means the 'content' width --> css width ?

"""...
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}


Total element width =
width
+ left padding + right padding
+ left border + right border
+ left margin + right margin

Total element height =
height
+ top padding + bottom padding
+ top border + bottom border
+ top margin + bottom margin

..."""