盒子间距离的计算规则： 

<!--
    盒子之间的间距，也就是margin值，按以下规则布局
    margin值计算规则：
        1、如果两个对象在一行里，第一个对象加了右边距，第二个对象加了左边距，那么margin值等于两个边距之和
        2、如果两个对象在两行，上面对象加了下边距，下面对象加了上边距，那么margin值取最大的值
    display:block;显示为块，可以将行内元素转换为块级元素。
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子见距离</title>
<style type="text/css">
    span{padding:10px;}
    .left{background-color:yellow;;margin-right:30px;}
    .right{background-color:blue;;margin-left:40px;}
    div {border:1px solid red;background-color:yellow;width:300px;height:150px;}
    .top{margin-bottom:30px;}
    .bottom{margin-top:50px;}
</style>
</head>

<body>
    <span class="left">left</span>
    <span class="right">right</span>
    <p>这是一个段落</p>
    <div class="top">我是一个块元素</div>
    <div class="bottom">我也是一个块元素</div>
    <a href="#">更多</a>
</body>
</html>

 

posted on 2013-08-12 14:30  大钢  阅读(987)  评论(0)  编辑  收藏  举报

导航