CSS margin外边距外间距 即div与div间距

分类 : Web前端

CSS 外边距,div与div间距设置基础之css margin DIV CSS margin外边距外补白边距样式属性

margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧,紧贴于边框,marign与padding位置却相反css padding却是紧贴边框位于边框内侧。

目录
  1. margin语法与应用结构

  2. css margin缩写简写

  3. 常用的margin样式

  4. css margin用法案例

  5. css margin总结

一、margin基础语法与结构 -  TOP

DIV CSS外边距指CSS属性单词margin,margin是设置对象四边的外延边距,没有背景颜色也无颜色。

1、margin语法
Margin:10px
Margin的值是数字+html单位,同时也可以为auto(自动、自适应)

2、应用结构
Div{margin:10px}
设置div对象四边间距为10px

3、Margin说明
margin是设置对象外边距外延边距离。
margin的值有三种情况,可以为正整数和负整数并加单位如PX像素(margin-left:20px);可以为auto自动属性(margin-left:auto 自动);可以为百分比(%)值(margin-left:3%)。

Margin延伸(单独设置四边间距属性单词)
margin-left 对象左边外延边距 (margin-left:5px; 左边外延距离5px)
margin-right 对象右边外延边距 (margin-right:5px; 右边外延距离5px)
margin-top 对象上边外延边距 (margin-top:5px; 上边外延距离5px)
margin-bottom 对象下边外延边距 (margin-bottom:5px; 下边外延距离5px)

margin用处示范图
常见margin使用场景

4、margin实际应用地方
两个布局之间距离设置。
css实例教程范例margin视图
如上图中“CSS手册”和“DIV CSS研教室”黄颜色的背景之间空隙(背景土红)。

二、css margin缩写简写 -  TOP

margin属性CSS样式,如遇到上下、左右、上下左右等情况我们可以缩写简写优化。
你可能需要了解:CSS优化-CSS压缩:http://www.css5.net/jiqiao/j97.shtml
你可能需要了解:HTML优化-HTML代码优化压缩:http://www.css5.net/jiqiao/j326.shtml

1、只有上下情况缩写
原始:margin-top:5px; margin-bottom:6px
缩写简写为:margin:5px 0 6px 0或margin:5px auto 6px auto

2、只有左右情况缩写
原始:margin-left:5px; margin-right:6px
缩写简写为:margin:0 6px 0 5px或margin:auto 6px auto 5px

3、只有三边情况缩写
原始:margin-top:5px; margin-bottom:6px; margin-left:4px
缩写:margin:5px 0 6px 4px或margin:5px auto 6px 4px

4、四边相同值缩写
原始:margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px
缩写:margin:5px;

5、四边不同值缩写
原始:margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px
缩写:margin:5px 8px 6px 7px;

6、四边其中上下值和左右值各相同缩写

上下相同、左右相同原始:margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px
缩写:margin:5px 7px;

Margin简写分析图:

margin css样式简写优化分析图
css div margin样式简写语法应用分析图

三、常用的margin样式   -   TOP

1、用margin设置对象盒子间距
我们常用margin设置2个盒子之间距离,无论上下左右的距离我们均可以利用margin实现间隔。

实际margin应用地方
实际可用margin地方示图

2、利用margin实现布局居中,基础单词:
marign:0 auto;
即可实现对象居中,但需要一个条件,那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式,其下级包含对象设置了margin:0 auto也会让其布局居中,但为了兼容各大浏览器建议对body设置一个text-align:center属性样式,这里divcss5提供一个css初始化模板为DIV CSS布局时候无需重复设置css text-align:center等初始化样式属性。

四、css margin普通案例   -   TOP

CSS5NET设置2个盒子,为了体现margin作用,我们对其2盒子设置css border边框、一定css宽度和css高度。

1、margin用法css代码
.divcss5-top,.divcss5-bottom{width:300px;height:100px;border:1px solid #F00}
.divcss5-bottom{ margin-top:10px}

2、html代码片段
<div class="divcss5-top">上对象</div>
<div class="divcss5-bottom">下对象,我们设置了margin-top为10px间距</div>

3、mairgin应用案例截图

div+css margin实例案例效果截图
margin实例实践案例效果图

从上案例我们分析出margin是设置对象(比如div盒子、span盒子等)之间间距,并体现出margin是存在与对象盒子边框外侧。

五、css margin总结   -   TOP

Margin样式是设置对象与对象之间间距,单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性,margin是设置盒子对象之间间距,一般设置时候注意margin简写优化。多实践并观察案例理解了margin作用即可很快上手使用margin。

margin缺点:
在使用CSS margin的时候容易造成CSS HACK。IE6解释此属性的时候容易造成双倍距离。
您可能需要了解CSS兼容浏览器知识。

你可以再了解以前divcss5介绍margin知识:http://www.css5.net/

来源网址:http://www.css5.net/rumen/r128.shtml


分类: Web前端    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

Vue生命周期,我奶奶看了都懂了
HTML语言中换行的代码是什么?
HTML5能做什么,主要用于做什么东西
方正汉真广标简体免费字体下载,方正汉真广标简体字体免费下载,方正汉真广
早晨几点起床才健康?专家:至少要符合这两点
Iframe嵌套HTML网页的用法?
怎样使用iframe,在网页中插入页面
前端大文件上传代码,大文件上传
Azure Cosmos DB (二) SQL API 操作
C#遍历指定文件夹中的所有文件


最新

div css隐藏内容样式方法
OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?

推荐阅读

c语言中break语句的作用
vscode----vue中HTML代码tab键自动补全
undefined是什么意思啊
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
DIV CSS字体(font-family)实现字体样式设置
C语言程序中break是什么意思?
C#语言之“string格式的日期时间字符串转为DateTime类型”
Mysql里表示布尔型的类型是什么
前端该怎么学?推荐一个学习路线!
sql中的modify语句,修改列属性

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16