margin,padding怎样用,如何区别margin和padding

  • 原创
  • |
  • 浏览:1089
  • |
  • 更新:
  • |
  • 标签:CSS 

CSS中margin和padding怎样区别对于很多小伙伴来说都比较难,今天小编就来教大家简单区别margin和padding以及使用它们。

工具/原料

  • 电脑
  • Hbuilder

方法/步骤

  1. 1

    如图,小编我就用div来说明分析margin和padding。*可以去除掉默认margin和padding的距离影响。

    margin,padding怎样用,如何区别margin和padding
  2. 2

    如图,没有任何默认margin和padding的粉蓝div,它们紧紧粘连在了一起。

    margin,padding怎样用,如何区别margin和padding
  3. 3

    接着给粉盒子(div)添加margin,再去发现加了margin后的变化效果。

    margin,padding怎样用,如何区别margin和padding
  4. 4

    粉盒子有了margin之后,就会与蓝盒子拉开对应的距离(margin值)。

    margin,padding怎样用,如何区别margin和padding
  5. 5

    接着尝试修改粉盒子的margin为负值,看看负值有啥效果。

    margin,padding怎样用,如何区别margin和padding
  6. 6

    可以看到,margin如果是正值便会往右移,负值便会左移。

    margin,padding怎样用,如何区别margin和padding
  7. 7

    接着添加padding值给粉盒子,看看padding的作用在啥地方。

    margin,padding怎样用,如何区别margin和padding
  8. 7
    该信息未经许可获取自百度经验
  9. 8

    有padding之后,可以看到文字被往里边挤。最后我们便可以知道margin是用来指定盒子外边的距离,而padding是用来指定盒子内部的距离。

    margin,padding怎样用,如何区别margin和padding
    END

注意事项

  • 有用可以收藏,方便下次查看。
  • 有啥问题可以私信我或者评论留言。
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部
相关标签CSS