【转载-学习】margin和padding

【原文:  https://www.cnblogs.com/zxnn/p/8186225.html

学习总结:

  1.padding

    将padding设置成负值无效

    1.在块元素中:

      padding在块级元素下,上下左右的padding都可以设置,会对元素内部发生改变。

    2.在内联元素中:

      行内非替换元素上设置的内边距不会影响行高计算,因此如果一个元素既有内边距又有背景,从视觉效果上看可能会延伸到其他行,有可能还会与其他内容重叠。

      元素的背景会延伸穿过内边距。

      不允许指定负边距值

      行内元素只有padding-left和padding-right有效果,上下内边距padding-top和padding-bottom没有效果

  2.margin

    margin:0 auto; 只对块元素起作用

    1.在块元素中:

      margin在块元素下,上下左右的margin可以随意设置。

      且块级元素的margin的参照基准是前一个元素,即相对自身之前的元素有margin距离。如果元素是第一个元素,则就是相对于父元素的margin距离。

    2.在内联元素中:

      margin-top和margin-bottom对内联元素的高度没有影响

      如果要改变内联元素的行高即类似与文本的行间距,那么只能使用这三个属性:line-height,font-size,vertical-align。请记住,这个影响内联元素的高度的是line-height而不是height

    

原文地址:https://www.cnblogs.com/buerjiongjiong/p/11555934.html