用JQ获取DIV宽度或高度（WIDTH, PADDING, BORDER, MARGIN）

这边讲的不一定是 div，所有 Block 对象都可以适用。

什么是 Block 对象？

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

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

Block 对象由四部份组成：

Content – 放内容的地方

Padding – 边框与内容之间的留白

Border – 边框

Margin – 边框以外的留白

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

jQuery :

var content = $(‘div’). width();
var contentWithPadding = $(‘div’). innerWidth();
var withoutMargin = $(‘div’). outerWidth();
var full = $(‘div’). outerWidth(true);

宽度与高度概念一样，只差水平与垂直向而已。

Margin 有个特色，就是当两个有 margin的 div 靠在一起时，两个 div 紧邻的 margin 不是相加，而是取其大者，举例来说，两个 10px margin 的 div 并在一起只会有 10px margin 的距离，若是一个 20px margin，另一个为 10px margin，则会有 20px 的 margin