CSS盒模型 理解

      每个元素（块级和内嵌）都会有个矩形盒子，这个盒子为元素盒，盒子的中间（center）为元素的内 容，center区域内的距离为元素的高度（height）、宽度（width）。在盒模型中 padding就是内容 （center）与边框（border）的空隙区域，而margin 则是边框（border）外的空隙区域。元素的背景颜 色和背景图像在内边框（padding）区域是可见的，并且延生到border下面；元素的外边框（maegin）区 域总是透明的，所有父级元素的背景能看见。



盒内距离表示例如：
margin：


                        margin:5px auto;意思上下为5,左右平均居中  

                        margin-top: 20px; 上外边距

                        margin-right: 30px; 右外边距

                        margin-bottom: 30px;下外边距

                        margin-left: 20px; 左外边距

                        margin:1px 四边统一边距

                        margin:1px 1px 上下边距

                        margin:1px 1px 1px 上,左右,下边距

                        margin:1px 1px 1px 1px 上,右,下,左边距

padding：

                        padding-top:20px;上内边距

                        padding-right:30px;右内边距

                        padding-bottom:30px;下内边距

                        padding-left:20px;左内边距

                        padding:1p四边统一内边距

                        padding:1px1px上下,左右内边距

                        padding:1px1px1px上,左右,下内边距

                        padding:1px1px1px1px上,右,下,左内边距

      在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

    

转载于:https://my.oschina.net/u/1866049/blog/291264