margin && padding盒子模型:

margin是模块与模块的空隙,padding是内容与边框的空隙

注:

1.margin:边缘、空白

2.padding:填充

margin:

属性
描述
简写属性。在一个声明中设置所有外边距属性。[1]
设置元素的下外边距。
设置元素的左外边距。
设置元素的右外边距。
margin-top
设置元素的上外边距。

语法结构

margin:5px auto;意思上下为5,左右平均居中
margin-top: 20px; 上外边距
margin-right: 30px; 右外边距
margin-bottom: 30px;下外边距
margin-left: 20px; 左外边距
margin:1px 四边统一边距
margin:1px 1px 上下边距
margin:1px 1px 1px 上,左右,下边距
margin:1px 1px 1px 1px 上,右,下,左边距
注释:允许使用负值。

语法举例

例子 1margin:10px 5px 15px 20px;上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2margin:10px 5px 15px;上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3margin:10px 5px;上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4margin:10px;所有 4 个外边距都是 10px
 
默认值:
0
继承性:
no
版本:
CSS1
JavaScript 语法:
object.style.margin="10px 5px"

实例

设置 p 元素的 4 个外边距:
p { margin:2cm 4cm 3cm 4cm; }

浏览器支持

所有浏览器都支持 margin 属性。
注释:任何的版本的 Internet Explorer(包括 IE8)都不支持属性值 "inherit"。

可能的值

描述
auto
浏览器计算外边距。
length
规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
%
规定基于父元素的宽度的百分比的外边距。
inherit
规定应该从父元素继承外边距。
 
 
padding:

语法结构

1
2
3
4
5
6
7
8
padding-top:20px;上内边距
padding-right:30px;右内边距
padding-bottom:30px;下内边距
padding-left:20px;左内边距
padding:1p四边统一内边距
padding:1px1px上下,左右内边距
padding:1px1px1px上,左右,下内边距
padding:1px1px1px1px上,右,下,左内边距
注释:不允许使用负值。

浏览器支持

所有浏览器都支持 padding 属性。
注释:任何的版本的Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值

描述
auto
浏览器计算外边距。
length
规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
%
规定基于父元素的宽度的百分比的外边距。
inherit
规定应该从父元素继承外边距。
 

css之margin && padding讲解的更多相关文章

  1. CSS 百分比 margin & padding

    前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...

  2. PHP全栈开发(八):CSS Ⅷ border margin padding

    在CSS里面,所有的HTML元素都可以看成是一个盒子. 那么在设计和布局的时候,最常用的,也就是用来定义这个盒子的外边距的就是margin 定义这个盒子的内边距的就是padding 元素的内容所占的宽 ...

  3. CSS 有关margin padding

  4. css样式margin padding border

  5. css之margin,padding的百分比

    注意:上下内边距与左右内边距一致:即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度. PS:而且是基于父元素内容的宽度(width属性的大小),不是基于父元素整个框架的宽度

  6. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  7. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

  8. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  9. CSS属性之position讲解

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: static position: inherit position: relative ...

随机推荐

  1. 【Apache】2.4.6版本的安装和配置

  2. Delphi 的运算符列表

    分类 运算符 操作 操作数 结果类型 范例 算术运算符 + 加 整数,实数 整数,实数 X + Y - 减 整数,实数 整数,实数 Result - 1 * 乘 整数,实数 整数,实数 P * Int ...

  3. Oracle 手动收集统计信息

    收集oracle统计信息 优化器统计范围: 表统计: --行数,块数,行平均长度:all_tables:NUM_ROWS,BLOCKS,AVG_ROW_LEN: 列统计: --列中唯一值的数量(NDV ...

  4. USB设备---URB请求快

    1.urb 结构体USB 请求块(USB request block,urb)是USB 设备驱动中用来描述与USB 设备通信所用的基本载体和核心数据结构,非常类似于网络设备驱动中的sk_buff 结构 ...

  5. C#巧用Excel模版变成把Table打印出来

    将一个做好的Excel模版,通过程序填上数据然后打印出来这个需求有两种方法一种是通过代码打开Excel模版然后填入数据然后再打印. 第二种方法就是我将要介绍的 1.将Excel设置好格式另存为HTML ...

  6. 在Linux下JDK1.4.2安装报错的解决方法

    JDK1.4.2的安装   Do you agree to the above license terms? [yes or no]   yes   Unpacking...   tail: cann ...

  7. linq to sql (Group By/Having/Count/Sum/Min/Max/Avg操作符)

    Group By/Having操作符 适用场景:分组数据,为我们查找数据缩小范围. 说明:分配并返回对传入参数进行分组操作后的可枚举对象.分组:延迟 1.简单形式: var q = from p in ...

  8. Redbean:入门(四) - 反射机制 以及 事务

    <?php //引入rb入口文件 include_once 'rb.php'; //定义dsn以及相关的数据 $dsn = 'mysql:host=localhost;dbname=hwibs_ ...

  9. Windows Phone自定义控件 ProgressRing

    前言 Windows Phone为开发者提供了很多原生控件,但在很多场景下我们需要对默认的功能或样式做一定的修改才能满足我们的需求,自定义控件应运而生.本文通过以自定义控件进度环(ProgressRi ...

  10. Nginx Gzip 压缩配置

    Nginx Gzip 压缩配置 随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU-Z ...