用 JQUERY 取得 DIV 的宽度与高度（WIDTH, PADDING, BORDER, MARGIN）

什么是 Block 对象？

简单讲就是会断行的对象，像 div 或 p 都是；相对于 Block 对象的叫做 Inline 对象，也就是不会断行的对象，像是 span 或 img。

有关 Block 对象的宽度与高度有个专有名词，叫做「Box Model」，有兴趣 google 一下 Box Model 的图片就知道了。

Block 对象由四部份组成：

• Content – 放内容的地方
• Padding – 边框与内容之间的留白
• Border – 边框
• Margin – 边框以外的留白

一般讲的宽度指的是内容宽度，但一个 div 的实际宽度不仅只于内容宽度，尤其在做 CSS 排版时更不能搞错，必须同时考虑 Padding、Border 与  Margin 的宽度，四个加起来才是 div 真正占有的宽度。

var content = $(‘div’). width();

var contentWithPadding = $(‘div’). innerWidth();

var withoutMargin = $(‘div’). outerWidth();

var full = $(‘div’). outerWidth(true);