2.1 内边距
padding的复合属性书写
padding内边距对于盒子的实际大小也是有影响的，解决方法如下：
具体实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>新浪导航</title> <style> .nav { height: 41px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; background-color: #fcfcfc; line-height: 41px; } .nav a { /* a属于行内元素 此时必须要转换 行内块元素 */ display: inline-block; height: 41px; padding: 0 20px; font-size: 12px; color: #4c4c4c; text-decoration: none; } .nav a:hover { background-color: #eee; color: #ff8500; } </style> </head> <body> <div class="nav"> <a href="#">新浪导航</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> <a href="#">微博</a> <a href="#">三个字</a> </div> </body> </html>
注意：行内元素、行内块元素和块元素的转化
2.2 外边距
外边距是设置盒子与盒子之间的距离
外边距可以让块盒子水平居中
外边距合并，嵌套块元素塌陷，解决方式如下：（即父元素与子元素可以不黏起来）
清楚内外边距的方法是：
* { margin: 0; padding: 0; }
