css的margin用法总体介绍

css的margin用法总体介绍:
本章节从总体上简单介绍一下margin属性的用法，具体细节本章节不多做介绍了，会给出相应的参阅文章。
一.基本介绍:
此属性用来设置元素的外边距，所谓的外边距就是元素外缘向外延伸形成的空白区域，也可以称作为外补白。
代码实例如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
<style type="text/css"> 
#box{
  width:300px;
  height:200px;
  background:green;
}
#box .demo{
  width:100px;
  height:100px;
  background:red;
  margin-left:50px;
}
</style> 
</head> 
<body> 
<div id="box">
  <div class="demo"></div>
</div>
</body> 
</html>

上面的代码中，红色div距离绿色div左边缘的距离就是外边距形成的补白效果。

更多相关内容可以参阅CSS的margin属性一章节。
二.外边距会有合并现象:
外边距合并是margin的一个非常重要的特点，如果不掌握可能会造成一些困扰，具体内容这里就不多介绍了，可以参阅margin外边距合并详解一章节。
三.margin和内联元素:
此属性也可以应用与内联元素，但是需要特别注意的是，对于左右外边距是没有任何问题的，但是对于上下外边距可能会出现问题，所以要应用外边距最好首先转换为块级元素。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13305

更多内容可以参阅:http://www.softwhy.com/divcss/

css的margin用法总体介绍

猜你喜欢