浅析CSS的margin属性

margin是css中的一个常用属性,margin有多种省略写法,刚接触的时候不太容易搞懂,因此本文特别记录一下。

css手册中对margin属性的说明为:

检索或设置对象四边的外补丁。默认值为 0 0。

如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个, 第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

margin省略数值的写法,基本原则如下:

1.如果没有left值,则使用right代替;

2.如果没有bottom值,则使用top代替;

3.如果没有right值,则使用top值代替。

1).如果margin只有三个值,按照值的顺序为margin:top right bottom;缺少了left,根据原则,则left的值有right来代替。

margin:10px 20px 30px;就等于margin:10px 20px 30px 20px;

2).如果margin只有两个值,按照值的顺序为margin:top right;缺少了bottom和left,根据原则left的值由right来代替,bottm的值由top来代替。

margin:10px 20px;就等于margin:10px 20px 10px 20px;

3).如果margin只有一个值,按照值的顺序为margin:top;缺少了bottom、left和right,根据原则left的值由right来代替,bottom的值由top来代替,right的值右top来代替,也就是说left的值也由top来代替。

margin:10px; 就等于margin:10px 10px 10px 10px;

更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/

时间: 2024-11-01 10:02:14

浅析CSS的margin属性的相关文章

网页制作学习:由浅入深详解CSS的margin属性

css|网页|详解 margin在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. 一.margin的基本特性 margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin,可以用来设置box的margin area.属性margin可以用来同时设置box的四边外边距,而其他的margin属性只能设置其自各的外边距. margin属性可以应用于几乎所有的元素,除了表格显示

CSS之margin属性由浅入深详解

margin在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. 一.margin的基本特性 margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin,可以用来设置box的margin area.属性margin可以用来同时设置box的四边外边距,而其他的margin属性只能设置其自各的外边距. margin属性可以应用于几乎所有的元素,除了表格显示类型(不包括 tab

CSS教程:margin,padding,border

文章简介:CSS中margin,padding,border-style有几种书写规范. 在我们使用CSS时,经常看到margin:0 0,margin:0 5px,padding:0 5px 10px;而它们研究是什么含义呢,在WEB标准中,它们会有以下含义,它适合于CSS中的margin,padding,border-style等属性 第一种情况,四个值都有,它们的含义如下属性:上 右 下 左 第二种情况,只有三个值,它们的含义如下属性:上 右左 下 第三种情况,只有两个值,它们的含义如下属

margin属性详解

margin在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. 一.margin的基本特性 margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin,可以用来设置box的margin area.属性margin可以用来同时设置box的四边外边距,而其他的margin属性只能设置其自各的外边距. margin属性可以应用于几乎所有的元素,除了表格显示类型(不包括 tab

由浅入深漫谈margin属性

margin在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. 一.margin的基本特性 margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin,可以用来设置box的margin area.属性margin可以用来同时设置box的四边外边距,而其他的margin属性只能设置其自各的外边距. margin属性可以应用于几乎所有的元素,除了表格显示类型(不包括 tab

利用CSS的Clip属性来创造多彩文字

css 原理 将二个相同而色彩不同的文字重合在一起,通过分别给其加 clip 属性,使上面和下面的文字被剪切位置不同,从而产生二种不同的色彩. clip : 摘自苏沈小雨CSS手册 clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换

CSS中margin和padding的两者对比与用法

  CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.--W3School 边界(margin):元素周围生成额外的空白区."空白区"通常是指其他元素不能出现且父元素背景可见的区域.--CSS权威指南 padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的"补白"(或者叫"留白"),因为他很形象.补白(padding):

CSS的position属性在DIV层中的应用

定位的话,父DIV设置position:relative后,子DIV的position:absolute就会相对父DIV作绝对定位,接下来为大家介绍下CSS的position属性在DIV层中的应用   原来只明白position:relative是相对定位,position:absolute 是绝对定位: 经常看到图片轮播的下方有个半透明背景的文字描述.我现在要做这样一个效果,因为不是轮播,所以没去找插件,想自己写. 半透明背景可以设置属性background: rgba(0, 0, 0, 0.

html-关于CSS中的属性width

问题描述 关于CSS中的属性width 为什么在CSS中定义的width,用FSCapture工具测量时,却发现不吻和,为什么会这样啊 解决方案 看下margin padding等,用IE F12或者Chrome带的开发工具等具体看下. 解决方案二: width属性仅为内容区宽度,不包括padding.border.margin:......答案就在这里:CSS width属性 解决方案三: 你测量这个干什么呀????????? 解决方案四: 这种情况应该是浏览器设置了缩放,你检查一下浏览器设置