div+css中padding和margin的用法

2015-06-19 05:20:25 访问(2915) 赞(0) 踩(0)


<!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><title>

</title>
    <style type="text/css">
        .divOne
        {
            margin: 0px auto;
            width: 800px;
            height: 300px;
            background-color: Red;
        }
        .divTwo
        {
            float: left;
            width: 590px;
            height: 150px;
            padding-left: 5px;
            padding-right: 5px;
            background-color: Blue;
        }
        .divTwoIn
        {
            float: left;
            width: 590px;
            height: 100px;
            background-color: White;
        }
        .divThree
        {
            float: left;
            width: 600px;
            height: 100px;
            background-color: Green;
        }
        
         .divTwo1
        {
            float: left;
            width: 590px;
            height: 150px;
            padding-left: 5px;
            padding-right: 5px;
            margin-top:5px;
            margin-left:5px;
            background-color: Blue;
        }
        .divTwoIn1
        {
            float: left;
            width: 590px;
            height: 100px;
            margin-top:5px;
            margin-left:5px;
            background-color: White;
        }
        .divThree1
        {
            float: left;
            width: 605px;
            height: 100px;
            background-color: Green;
        }
    </style>
</head>
<body style="margin-top: 0px;">
     
    <div class="divOne">
        <div class="divTwo">
            <div class="divTwoIn">
            </div>
        </div>
        <div class="divThree">
        </div>
    </div>
    <br />
    <div class="divOne">
        <div class="divTwo1">
            <div class="divTwoIn1">
            </div>
        </div>
        <div class="divThree1">
        </div>
    </div> 
</body>
</html>