如果我们想要移动盒子等的位置 ，除了可以用相对定位和绝对定位还可以用margin 和paddinng；
margin和padding的用法：
padding和margin后面可以跟1或2或3或4个数，按照顺序分别是上，右，下，左。具体的操作如下：
（1）padding(margin)-left:10px;左内（外）边距；
（2）padding(margin)-right:10px;右内（外）边距；
（3）padding(margin)-top:10px;上内（外）边距；
（4）padding(margin)-bottom:10px;下内（外）边距；
（5）padding(margin):10px;四边统一内（外）边距；
（6）padding(margin):10px 20px; 10px是上下内（外）边距；20px是左右内（外）边距
（7）padding(margin):10px 20px 30px; 10px是上内（外）边距；20px是左右内（外）边距；30px是下内（外）边距；
（8）padding(margin):10px 20px 30px 40px; 10px是上内（外）边距；20px是右内（外）边距；30px是下内（外）边距；40px是左内边距；
先定为一个块，对块和文本不进行任何操作的时候，块在浏览器默认上 左有8个像素，块和文本的位置如图：
在这里我们可以利用margin改变块的位置；现在我们举例用margin让块紧靠浏览器上左边框。
代码如下：
上面代码中我给的margin是-8px，因为在浏览器中默认上左有8个像素，所以这里的margin: -8px;可以让红色的盒子靠着浏览器的上边和左边。
span是个行级元素， 先把他转化成块级元素，然后给padding就可以设置“文字”与红色盒子的内边框距离。
margin的用法说明：
（1）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+30px的margin，将得到30px的空白距离。（两个盒子都有margin时，选择较大距离的）
（2）需要在border外侧添加空白时。
（3）空白处不需要有背景色时。
padding的用法说明：
（1）padding不能给负值，margin可以给负值。
（2）需要在border内测添加空白时（文字与边框距离的设置）
（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px
+20px的padding，将得到35px的空白。
另外，记录一下我今天遇到的一个小问题，如下图一级菜单里面的公司招聘里的二级菜单当鼠标悬浮在python上，我们明显可以看到python没有在竖直方向居中，这个是因为在给定宽高之后，为了让二级菜单整体往下走一点，给了一个padding：10px 0 0 0；这个10px就加在高上，所以text-align: center只能让文本在水平方向居中，而不能在竖直方向居中。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .out_block{ height: 35px; width: 1500px; padding: 10px; background-color: #97eede; float: left; } .menu{ list-style: none; float: left; display: block; width:275px; max-height: 30px; text-align: center; line-height: 30px; border: 1px solid silver; background: #ffa874 !important; } .menu:hover{ cursor: pointer; color: red; background: white!important; } .menu_li:hover .menu_two{ display: block; } .menu_two{ list-style: none; display: none; color: black; background:#ffa874; } .menu_two>li{ display: block; padding: 10px 0 0 0; height: 30px; line-height: 30px; text-align: center; font-size: 14px; } .menu_two>li:hover{ background: white; color: red; } </style></head><body><ul class="out_block"> <li class="menu">首页</li> <li class="menu menu_li">公司招聘 <ul class="menu_two"> <li>web前段</li> <li>python</li> <li>java</li> <li>linux</li> <li>运维</li> <li>ui</li> </ul> </li> <li class="menu">相册</li> <li class="menu">了解更多</li> <li class="menu">帮助</li></ul></body></html>解决这个问题的方法如下：加一段line-height:20px；（如果是正常情况的话（这里的正常情况指的是给定宽高，没有影响宽高的因素如：padding）让文本在竖直方向居中line-height：30px（宽度））
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .out_block{ height: 35px; width: 1500px; padding: 10px; background-color: #97eede; float: left; } .menu{ list-style: none; float: left; display: block; width:275px; max-height: 30px; text-align: center; line-height: 30px; border: 1px solid silver; background: #ffa874 !important; } .menu:hover{ cursor: pointer; color: red; background: white!important; } .menu_li:hover .menu_two{ display: block; } .menu_two{ list-style: none; display: none; color: black; background:#ffa874; } .menu_two>li{ display: block; padding: 10px 0 0 0; height: 30px; line-height: 20px; text-align: center; font-size: 14px; } .menu_two>li:hover{ background: white; color: red; } </style></head><body><ul class="out_block"> <li class="menu">首页</li> <li class="menu menu_li">公司招聘 <ul class="menu_two"> <li>web前段</li> <li>python</li> <li>java</li> <li>linux</li> <li>运维</li> <li>ui</li> </ul> </li> <li class="menu">相册</li> <li class="menu">了解更多</li> <li class="menu">帮助</li></ul></body></html>