盒模型中的magin和padding学习

margin 外边距：改变元素外边的间距
padding 内边距：改变元素与内容的间距
padding:10px;一个值 控制四个方向的值
padding：10px 20px;两个值，上下 左右；
padding：10px 20px 30px；三个值， 上 左右 下；
padding：10px 20px 30px 40px；四个值， 上 右 下 左；顺时针方向改变；

    padding-left  左内边距
    padding-right  右内边距
    padding-top   顶部内边距
    padding-bottom 底部内边距
    注：内边距不能为负值，内边距增加不会对背景图位置产生影响，但是盒子还是会变大

    margin 四个方向
    margin 上下 左右
    margin 上 左右 下
    margin 上 右 下 左

    margin-left  左外边距
    margin-right  右外边距
    margin-top   顶部外边距
    margin-bottom 底部外边距
    注：margin 可以为负值；auto自适应，只能在水平方向上用 居中效果

    margin常见bug
        都是只针对垂直方向外边距问题
        1.兄弟元素 上下外边距相遇，只显示较大值
        2.父子元素  嵌套元素的外边距，子元素与父元素外边距相遇时，显示较大值；（可以用父元素的padding或者border解决子元素的外边距与父元素相遇）