盒子使用
样例如下：
.css{
?height: 100px;
?width: 100px;
?padding: 50px;
?margin: 50px;
?border: 1px solid red;
}说明：padding(内边距)/margin(外边距): 上 右 下 左；或直接使用指定边距如padding-top:2px。
margin: 0 auto ;居中设置
特例说明
整个网页最大的盒子是浏览器(<document>)，<body>是<document>的子元素。故<body>标签也有margin(外边距)，浏览器给<body>默认的margin大小是8个像素，故<body>没有占据整个页面的全部区域，若需占据全部区域，需对<body>的margin进行设置。
盒子说明【标准盒子模型】
内容：width、height
盒子样例(真实占有宽高都为：302*302)：
.box1{ ???????width: 100px; ???????height: 100px; ???????padding: 100px; ???????border: 1px solid red; ??}/*盒子真实占有宽度 = 左border + 左padding + width + 右padding + 右border
?盒子真实占有高度 = 上border + 上padding + height + 下padding + 下border*/.box2{ ???????width: 250px; ???????height: 250px; ???????padding: 25px; ???????border: 1px solid red; ???}盒子模型：
总结：
如果想保持一个盒子的真实占有高宽不变，那么加width/height的时候，就要减相应的padding。加padding的时候就要减相应的width/height。因为盒子变胖是灾难性的，会把别的盒子挤下去。
css盒子模型_详述
原文地址：https://www.cnblogs.com/ajuan/p/9007663.html