首页 / CSS / cssmargin外边距使用实例分析
cssmargin外边距使用实例分析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了cssmargin外边距使用实例分析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2920字，纯文字阅读大概需要5分钟。
内容图文
margin用于设置对象标签之间距离间隔，比如2个上下排列的DIV盒子，我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧，紧贴于边框，marign与padding位置却相反css padding却是紧贴边框位于边框内侧。
一、margin基础语法与结构
外边距指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）
二、css margin缩写简写
css margin属性，如遇到上下、左右、上下左右等情况我们可以缩写简写优化。
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样式
1、用margin设置对象盒子间距
我们常用margin设置2个盒子之间距离，无论上下左右的距离我们均可以利用margin实现间隔。
2、利用margin实现布局居中，基础单词：
marign:0 auto;
即可实现对象居中，但需要一个条件，那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式，其下级包含对象设置了margin:0 auto也会让其布局居中，但为了兼容各大浏览器建议对body设置一个text-align:center属性样式。
四、css margin案例
文本的上边距设置使用厘米值
这个例子演示了如何设置一个使用厘米值的文本的顶部margin。
A paragraph with no margins specified.
A paragraph with a 2cm top margin.
A paragraph with no margins specified.
在线运行
五、css margin总结
Margin样式是设置对象与对象之间间距，单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性，margin是设置盒子对象之间间距，一般设置时候注意margin简写优化。多实践并观察案例理解了margin作用即可很快上手使用margin。
margin缺点：在使用CSS margin的时候容易造成CSS HACK。IE6解释此属性的时候容易造成双倍距离。您可能需要了解CSS兼容浏览器知识。
相关阅读：
CSS 教程
CSS3 教程
CSS 参考手册
内容总结
以上是互联网集市为您收集整理的cssmargin外边距使用实例分析全部内容，希望文章能够帮你解决cssmargin外边距使用实例分析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。