石家庄做网站,石家庄网站优化,石家庄网络推广,石家庄网络公司
当前位置:主页 > 新闻资讯 > 技术笔记 >

css margin外边距使用实例分析

发表日期:2019-12-17 12:31文章编辑:css教程浏览次数: 标签: 技术笔记|css教程|    

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。
 
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {margin-top:2cm;}
</style>
</head>
 
<body>
 
<p>A paragraph with no margins specified.</p>
<p class="ex1">A paragraph with a 2cm top margin.</p>
<p>A paragraph with no margins specified.</p>
 
</body>
</html>
 
 
 
五、css margin总结
Margin样式是设置对象与对象之间间距,单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性,margin是设置盒子对象之间间距,一般设置时候注意margin简写优化。多实践并观察案例理解了margin作用即可很快上手使用margin。
 
margin缺点:在使用CSS margin的时候容易造成CSS HACK。IE6解释此属性的时候容易造成双倍距离。您可能需要了解CSS兼容浏览器知识。

如没特殊注明,文章均来自网络!转载请注明来自:https://www.yousouke.com/News/jsbj/605.html

网站设计案例推荐

热门新闻

DEDECMS提示Fatal error错误

Nginx的Gzip压缩配置

织梦DedeCMS定时自动生成首页HTML的实现方法

IIS7下js文件启用Gzip后却不压缩的解决方法

dede织梦教程:列表页、文章页调用所有顶级栏目文章的方法

WordPress 集成百度 Sitemap 实时推送代码

织梦DedeCMS定时自动生成首页HTML的实现方法

WORDPRESS文章中微信打赏功能的2种实现方法

相关新闻

Dedecms如何显示文章数量的方法

dede出现search.php on line 44 search.php报错

dedecms大量删除文章后,列表页显示错误修复办法

DedeCMS最新文章、相关文章、推荐文章、热点文章、头条

织梦Dedecms tag标签长度限制的修改

dede织梦网站地图sitemap移出data

推荐新闻

帝国cms怎么实现页面自动生成html

帝国cms灵动标签调用字母所属的信息

dede简略标题调用标签

IIS7下js文件启用Gzip后却不压缩的解决方法

织梦CMS文章模型整合下载功能,可判断点数,会员组等下载权限

正确配置 WordPress 邮件SMTP

织梦DEDECMS教程:添加RSS订阅功能

织梦DedeCMS实现{dede:channel}标签增加数字序号的方法

帝国cms如何在tags列表页获取当前tag的ID方法