美文网首页
*{padding: 0;margin: 0;}的作用以及和ht

*{padding: 0;margin: 0;}的作用以及和ht

作者: CoderZb | 来源:发表于2020-02-01 21:28 被阅读0次

    *在html中表示的是所有标签,*{padding: 0;margin: 0;}中表示所有的标签的内外间距为0。因为有些标签会有默认的间距。写样式的时候,有这些默认的间距的存在,无疑会增加开发的复杂度。
    以google浏览器为例,
    body标签,默认的margin,上下左右各为8px
    ul标签,默认的margin,左外间距为40px,(上右下是正常的,都为0px)
    dl标签,默认的margin,上下各为16px,(左右是正常的,都为0px)
    dd标签,默认的margin,左外间距为40px,(上右下是正常的,都为0px)
    当然了不同浏览器的默认间距还可能会不一样,因此为了方便管理,可以在公共样式中写入*{padding: 0;margin: 0;},这样bodyuldldd的默认的padding和margin都重置为0了,既解决了不同浏览器的兼容性问题,也解决了默认的间距的存在,增加开发的复杂度的问题。

    图1:body标签默认的margin,上下左右各为8px

    image.png

    图2:ul标签默认的margin,左外间距为40px,(上右下是正常的,都为0px)

    image.png

    图3:dl标签默认的margin,上下各为16px,(左右是正常的,都为0px)

    image.png

    图4:dd标签默认的margin,左外间距为40px,(上右下是正常的,都为0px)

    image.png

    相比于

    *{
      padding: 0;
      margin: 0;
    }
    

    下面的html,body{padding: 0;margin: 0;}作用就少多了,表示清除浏览器的默认内外间距。

    html,body{
      padding: 0;
      margin: 0;
    }
    

    相关文章

      网友评论

          本文标题:*{padding: 0;margin: 0;}的作用以及和ht

          本文链接:https://www.haomeiwen.com/subject/phnxxhtx.html