php老师 发表于 2014-10-2 10:57:03

margin的练习-对于margin的设置,以及对于外边据和内边距还有border的设置

对于一个新手一定要理解margin的设置,默认的是上右下左的的数值来设置的。大家可以尝试下自己联系,下面是我做的代码效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>外边距margin设置</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="道勤教育 http://www.daoqin.net" />
<style>
        #container{
                width:1000px;
                height:600px;
                background:green;
        }
        div{
                width:400px;
                height:200px;
                background:blue;
                float:left;

        }
        #test{
                /*
                margin:10px;
               
                margin-top:10px;
                margin-left:20px;
                margin-bottom:30px;
                */
                background:red;
               
                margin:20px 30px 10px ;


        }
        #test003{
                width:1000px;
        }
        #test002{
                background:purple;
        }
</style>
</head>
    <body>
            <div id="container">       

                 <div id="test"></div>
                   <div id="test002"></div>
                   <div id="test003"></div>
            </div>
    </body>
</html>

页: [1]
查看完整版本: margin的练习-对于margin的设置,以及对于外边据和内边距还有border的设置