爱站程序员基地内容区，内边距，边框，外边距
盒子模型由内容区，内边距，边框，外边距组成
[内容区 和 边框]
内边距
外边距
代码
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=, initial-scale=1.0\"><title>Document</title></head><style>.box1{/* 内容区 */width: 200px;height: 200px;background-color: #bfa;/* 边框 */border-color: salmon;border-style: solid;border-width: 20px;/* border-width:10px 20px 30px 40px;border:10px red solid;border-right: none ; *//* 内边距 */padding: 100px 200px 300px 200px;}/* 通过inner(inner为div的子元素)来填满内容区，这样内容区的背景颜色就不会延伸到内边距 */.inner{width: 100%;height: 100%;background-color:blue;}</style><body><div class=\"box1\"><div class=\"inner\"></div></div></body></html>
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title></head><body><style>.box1{/* 设置内容区，外边距和边框 */width: 200px;height: 200px;background-color: chartreuse;border: red 10px solid;padding: 10px;/*设置外边距 向下移动和向右移动 */margin-top: 100px;margin-left: 100px;}.inner{width:100%;height: 100%;background-color: coral;}</style></body><div class=\"box1\"><div class=\"inner\"></div></div></html>
