在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

一、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的区别用图表示为

padding和margin的用法的更多相关文章

  1. CSS中padding和margin以及用法

    CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...

  2. margin和padding的区别和用法

    margin和padding的区别和用法 什么是margin.padding? marigin:就是外边距.padding:就是内边距.怎么就容易记住两者呢? 马蓉大家都知道吧,给王宝强带帽子的那位, ...

  3. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  4. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  5. CSS 盒子模型(Box model)中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  6. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

  7. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  8. 盒子模型的margin负数用法

    盒子的margin用法大家都应该很清楚,在实际中一般使用margin来水平居中或者让自己移动相应的位置,但是margin给负数在实际中也是有用的. 如图为两个浮动的盒子. 给左边的盒子margin-l ...

  9. css中padding与margin

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

随机推荐

  1. pyplot基本绘制

    pyplot实现的功能与Matlab中的绘制方式很相似. 先看一个绘制折线的例子: import matplotlib.pyplot as plt plt.plot([1, 17, 8, 9]) pl ...

  2. iptables打开22,80,8080,3306等端口

    systemctl stop firewalld systemctl mask firewalld Then, install the iptables-services package: yum i ...

  3. 8月白盒测试课程 - C C++ 白盒测试实践

    8月白盒测试课程 - C C++ 白盒测试实践http://gdtesting.cn/news.php?id=36

  4. 【Flask】Flask Session操作

    ### session:1. session的基本概念:session和cookie的作用有点类似,都是为了存储用户相关的信息.不同的是,cookie是存储在本地浏览器,session是一个思路.一个 ...

  5. UEFI引导修复

    一.用bcbboot自动修复 我们建议大家启动64位8PE,用它带的bcdboot来修复. (一)指定esp分区修复 环境为64位8PE,bios/uefi启动进入下都可以 1.启动64位8PE,并用 ...

  6. cordova 5.0版本说明

    2015/04/21发布Cordova 5.0.0! 1)插件从Cordova plugins registry(CPR)全部移到npm,并且重新命名 ***org.apache.cordova.* ...

  7. Docker与自动化测试及其测试实践

    Docker 与自动化测试 对于重复枯燥的手动测试任务,可以考虑将其进行自动化改造.自动化的成本在于自动化程序的编写和维护,而收益在于节省了手动执行用例的时间.简而言之,如果收益大于成本,测试任务就有 ...

  8. 利用Metasploit进行Linux提权

    利用Metasploit进行Linux提权 Metasploit 拥有msfpayload 和msfencode 这两个工具,这两个工具不但可以生成exe 型后门,一可以生成网页脚本类型的webshe ...

  9. Define class with itself as generic implementation. Why/how does this work?

    https://stackoverflow.com/questions/10709061/define-class-with-itself-as-generic-implementation-why- ...

  10. 重装window 7系统,从做一个u盘启动盘,到装系统,很不错

    老毛桃U盘启动盘制作工具是现在最流行的U盘装系统和维护电脑的专用工具,一是制作简单,几乎100%支持所有U盘一键制作为启动盘,不必顾虑以前量产U盘考虑专用工具的问题.二是制作后工具功能强大,支持GHO ...