您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

margin和padding的用法及区别浅析
发表:紫石头原创模板堂    发表时间:2018-09-11 11:35:37    阅读:69
    有一定css基础的人都知道padding和margin,它们都是边距的含义,但是,许多新手还是不太明白两者的区别。紫石头小编今天就带大家了解一下margin和padding都有什么区别。
    padding是控件的内容相对控件的边缘的边距.margin是控件边缘相对父空间的边距。在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。
    下面讲解 padding和margin常用的用法
    一、padding
    1、语法结构
    (1)padding-left:10px; 左内边距
    (2)padding-right:10px; 右内边距
    (3)padding-top:10px; 上内边距
    (4)padding-bottom:10px; 下内边距
    (5)padding:10px; 四边统一内边距
    (6)padding:10px 20px; 上下、左右内边距
    (7)padding:10px 20px 30px; 上、左右、下内边距
    (8)padding:10px 20px 30px 40px; 上、右、下、左内边距
    2、可能取的值
    (1)length  规定具体单位记的内边距长度
    (2)%       基于父元素的宽度的内边距的长度
    (3)auto    浏览器计算内边距
    (4)inherit 规定应该从父元素继承内边距
    3、浏览器兼容问题
    (1)所有浏览器都支持padding属性
    (2)任何版本IE都不支持属性值“inherit”
    二、margin
    1、语法结构
    (1)margin-left:10px; 左外边距
    (2)margin-right:10px; 右外边距
    (3)margin-top:10px; 上外边距
    (4)margin-bottom:10px; 下外边距
    (5)margin:10px; 四边统一外边距
    (6)margin:10px 20px; 上下、左右外边距
    (7)margin:10px 20px 30px; 上、左右、下外边距
    (8)margin:10px 20px 30px 40px; 上、右、下、左外边距
    2、可能取的值
    (1)length  规定具体单位记的外边距长度
    (2)%       基于父元素的宽度的外边距的长度
    (3)auto    浏览器计算外边距
    (4)inherit 规定应该从父元素继承外边距
    3、浏览器兼容问题
    (1)所有浏览器都支持margin属性
    (2)任何版本IE都不支持属性值“inherit”

    三、margin和padding的区别用图表示为

工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照