CSS margin(外边距)

   CSS margin(外边距)属性定义元素周围的空间。

margin

   margin清除周围的(外边框) 元素区域。margin 没有背景颜色,是完全透明的。

   margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。

可能的值

 

说明
auto设置浏览器边距。
这样做的结果会依赖于浏览器
length定义一个固定的margin(使用像素,pt,em等)
%定义一个使用百分比的边距

    Margin可以使用负值,重叠的内容。

 

Margin-单边外边距属性

 

   在css中,它可以指定不同的侧面不同的边距:

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		p 
		{
			background-color:yellow;
		}
		p.margin
		{
			margin-top:100px;
			margin-bottom:100px;
			margin-right:50px;
			margin-left:50px;
		}
	</style>
</head>  
<body > 
	<p>这是一个没有指定边距大小的段落。</p>
	<p class="margin" >这是一个指定边距大小的段落。</p>
</body>  
</html>

Margin - 简写属性

   为了缩短代码,有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。

   所有边距属性的简写属性是 margin:

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		p 
		{
			background-color:yellow;
		}
		p.margin
		{
			margin:100px 50px;
		}
	</style>
</head>  
<body > 
	<p>这是一个没有指定边距大小的段落。</p>
	<p class="margin" >这是一个指定边距大小的段落。</p>
</body>  
</html>

margin属性可以有一到四个值。/p>

  • margin:25px 50px 75px 100px;
    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px
  • margin:25px 50px 75px;
    • 上边距为25px
    • 左右边距为50px
    • 下边距为75px
  • margin:25px 50px;
    • 上下边距为25px
    • 左右边距为50px
  • margin:25px;
    • 所有的4个边距都是25px

 

实例

 

   文本的上边距设置使用厘米值

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		p.ex1
		{
			margin-top:2cm;
		}
	</style>
</head>  
<body > 
	<p>这是一个没有指定边距大小的段落。</p>
	<p class="ex1" >一个2厘米上边距的段落</p>
	<p>一个没有指定边距大小的段落。</p>
</body>  
</html>

   使用百分比值设置文本的下边距

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		p.bottommargin
		{
			margin-bottom:25%;
		}
	</style>
</head>  
<body > 
	<p>这是一个没有指定边距大小的段落。</p>
	<p class="bottommargin" >这是一个指定下边距大小的段落</p>
	<p>一个没有指定边距大小的段落。</p>
</body>  
</html>

所有的CSS边距属性

属性描述
margin简写属性。在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

 

参考:

https://www.yuque.com/docs/share/a0fe081e-f923-4924-af80-707c55605723

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值