盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding，边框外的空白是外边距margin，如下所示，这个盒模型元素框的宽度值=内容区域的宽度+2（内边距+外边距+边框），也就是该示例中的元素宽度为170px，需要注意的是在 css 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。（浏览器查看的时候记得打开控制台F12，点击对应的元素查看）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>盒模型大小取决于它的padding，margin，border数值</title> 7 <style type="text/css"> 8 div{ 9 padding: 10px;/*内边距*/ 10 margin: 20px;/*外边距*/ 11 margin: 10px 20px 30px 40px;/*上10px 右20px 下30px 左40px*/ 12 margin: 10px 20px;/*上下 左右*/ 13 margin: 10px 20px ;/*上 上下不一样，左右一样*/ 14 margin: 10px 20px 30px;/*外边距*/ 15 border: 5px solid red;/*边框*/ 16 width: 100px;/*内容区域宽度100*/ 17 height: 100px;/*内容区域高度100*/ 18 } 19 /*盒子大小值=2（内边距+边框+外边距）*//*该div大小*/ 20 </style> 21 </head> 22 <body> 23 <div>看再多的书是学不全脚本的，要多实践。</div> 24 </body> 25 </html>
不论是margin还是padding,它们都是按照顺时针排列的，上右下左定义数值的；比方说这个margin:10px 10px 10px 10px是讲这个盒子上下左右都增加了10px的外边距，简写margin：10px；marigin:10px 10px;上下 左右外边距10px
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>margin所谓bug居然是重叠，咋解决</title> 7 <style type="text/css"> 8 .box1,.box2{ 9 width: 200px; 10 height: 200px; 11 margin: 10px 20px; 12 background-color: red; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="box1">功能说明书里不存在可操作性</div> 18 <div class="box2">软件在能够复用前必须先能用。</div> 19 </body> 20 </html>
按照正常思维来讲，上面的代码里面的2个盒子的上下间距应该是20px缝隙，但是实际我们在控制台查看的时候确只有10px，另外10px显然被重叠了，如果我们调整2个盒子的margin值大小，会发现上下间距取最大值20px（margin平级元素取最大值 ）；解决办法：1.float2改变元素结构display:inline-block此外如果margin嵌套关系,也就是父子关系的时候你会发现他们是重合的，没有缝隙，那么如何解决margin带来的这些问题了，解决办法：盒子是没有盖子的，想办法给2端填充内容，可以使用border、padding、overflow:hidden；盒子模型对于我们后面的网站布局很重要，利于网站的精确定位。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>解决margin产生的bug方法</title> 7 <style type="text/css"> 8 /* .box1,.box2{ 9 200px; 10 height: 200px; 11 background-color: red; 12 } */ 13 /* .box1{ 14 margin: 10px 20px; 15 } 16 .box2{ 17 margin: 20px 10px; 18 } 19 .box3{ 20 margin: 20px 10px; 21 } 22 .box4{ 23 margin: 10px 20px; 24 } */ 25 26 /* 盒子模型平级带来的问题解决办法：1.float 2.display:inline-block 3.直接写一个最大值，平级取最大值的margin*/ 27 div{ 28 /* float: left; */ 29 display: inline-block; 30 width: 1200px; 31 } 32 .box1{ 33 margin: 10px 20px; 34 } 35 .box2{ 36 margin: 80px 10px; 37 } 38 39 /* 盒子模型平级嵌套带来的问题解决办法：盒子是没有盖子的，想办法给2端填充内容，可以使用border、padding、overflow:hidden；上下填充文字*/ 40 p{ 41 width: 800px; 42 } 43 .box3,.box4{ 44 margin: 30px; 45 } 46 .box3{ 47 background-color: green; 48 /* border:1px solid red*//*给父元素加border*/ 49 padding: 10px; /*给父元素加padding*/ 50 /*overflow: hidden;*//*添加overflow:hidden 超出部分隐藏，带来效果是所有超出全部裁剪掉*/ 51 } 52 .box4{ 53 display: block; 54 background-color: greenyellow; 55 } 56 </style> 57 </head> 58 <body> 59 <div class="box1">功能说明书里不存在可操作性</div> 60 <div class="box2">软件在能够复用前必须先能用。</div> 61 <p class="box3"> 62 <!-- 简单不先于复杂，而是在复杂之后。 --> 63 <span class="box4">过去的代码都是未经测试的代码。</span> 64 <!-- 要么做第一个，要么做最好的一个 --> 65 </p> 66 </body> 67 </html>