盒模型padding

内边距padding

<div class="box"> All afternoon his tractor pulls a flat wagon with bales to the barn, then back to the waiting chopped field. It trails a feather of smoke. Down the block we bend with the season: shoes to polish for a big game,storm windows to batten or patch. And how like a field is the whole sky now that the maples have shed their leaves, too. </div>

背景颜色包含padding和content。

padding分开写

默认是给矩形四周添加相同的内边距，四周内边距不同时，分别设置。

.box { padding-top: 20px; /*上内边距*/ padding-right: 20px; /*右内边距*/ padding-bottom: 20px; /*下内边距*/ padding-left: 20px; /*左内边距*/ }

padding简写

1.上下一样，左右一样

div{ padding: 20px 30px; }

第一个值是上，第二个值是右。 2.上下一样，左右不一样

div{ padding: 20px 30px 20px 10px; }

3.上下不一样，左右一样

div{ padding: 30px 10px 20px; }

上、右、下、左

box-sizing

规定如何计算一个元素的总宽度和高度，有两个值content-box,border-box,默认content-box。