css外边距之margin属性的用法笔记

原创 PHP笔记  2017-03-24 17:58  阅读 1,365 views 次

margin属性是用来设置外边距的,margin是没有背景颜色,是透明的。

边距css属性

  • margin:简写属性,同时设置上下左右外边距;
  • margin-bottom :元素的下外边距。
  • margin-left:元素的左外边距。
  • margin-right:元素的右外边距。
  • margin-top:元素的上外边距。

实例:

......
<body>
<style type="text/css">
div{width:600px; height:350px;border:2px solid red;}
#a{border:2px solid #A020F0;}
#b{
border:2px solid #F4A460;
margin-top:30px;
margin-bottom:60px;
margin-right:30px;
margin-left:50px;
}
#c{border:2px solid #A020F0;}
</style>
<div>
<p id="a">元素内容</p>
<p id="b">margin外边距单边设置示例</p>
<p id="c">元素内容</p>
</div>
</body>
......

运行结果:

 

css简写属性margin

margin属性可以同时设置上下左右外边距;

格式:

选择器{
margin:1 2 3 4;/*1:上外边距;2:右外边距;3:下外边距;4:左外边距*/
margin:1 24 3;/*24:左右外边距;*/
margin:13 24;/*13:上下外边距;*/
margin:1234;/*13:上下左右外边距;*/
}

实例:

......
<body>
<style type="text/css">
div{width:600px; height:350px;border:2px solid red;}
#a{border:2px solid #A020F0;}
#b{
border:2px solid #F4A460;
margin:30px 30px 60px 50px;
}
#c{border:2px solid #A020F0;}
</style>
<div>
<p id="a">元素内容</p>
<p id="b">简写margin属性设置外边距示例</p>
<p id="c">元素内容</p>
</div>
</body>
......

运行结果:

本文地址:https://www.ggbiji.com/css-margin.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情