前文跟大家大致的介绍了css的id/class选择器与一些基本属性的设置。今天跟大家讲讲css元素的结构问题。

元素的结构

因为不太会画图，就直接说了，反正也不是太难理解。
一个控件元素基本包含margin/border/padding/content这4个部分。

1.margin

margin 是最外层的部分，称之为外边距。这一部分对于元素形成的可视控件来说就像是一圈正方形的无形轮廓。正如武林高手历尽千辛万苦练成了先天罡气一样，一经施展（css设置）。周围的敌人（控件）就接近不得。
注：可直接设置margin，也可按上下左右分别设置4个方向上的外边距。

2.border

border 是第2外的部分，称之为边框，可视。这一部分就如人的皮肤一般，有诸多特点。比如颜色，人的皮肤颜色按照肤色可分为黑/白/黄三种（border你想怎么设置就怎么设置，几万种都不叫事）。再比如形状有方脸，圆脸，鞋拔子脸等等（虚线，实线，细线，粗线等等）。
注：不但有各种类型给你选择，还跟margin一样可以对上下左右分别设置。

3.padding

padding 是相对于外边距的内边距部分，就称之为内边距。如人之血肉，胖瘦皆因此而起。类似于margin，直接参考margin吧。

4. content

啥都不说了，如果元素控件是个人，这就是人的腑脏髓骨。图文都在这了。

5. outline

什么，你问刚不是只说有4个吗，这个是怎么回事？呵，因为这东西你基本上不需要用，就像眼镜，耳环之类的饰品。可有可无，有兴趣的朋友自己去查查看吧！

结构图

emmm，嗯！写完再想想，有点短，还是画个图吧。如下：

结构.png