div+css入门之margin和padding的区别

2015-06-19 15:50:46 访问(2979) 赞(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;
            color:White;
        }
        .divTwo
        {
            float: left;
            width: 590px;
            height: 20px;
            padding-left: 0px;
            padding-right: 0px;
            background-color: Blue;
            color:White
        }
        .divThree
        {
            float: left;
            width: 590px;
            height: 20px;
            padding-left: 5px;
            padding-right: 5px;
            background-color: Green;
        }
        .divfour
        {
            float: left;
            width: 600px;
            height: 20px;
            padding-left: 0px;
            padding-right: 0px;
            background-color: Blue;
        } 
        .divfive
        {
            float: left;
            width: 600px;
            height: 20px;
            margin-left: 5px;
            margin-right: 5px;
            background-color: Green;
        } 
        .divsix
        {
            float: left;
            width: 605px;
            height: 20px;
            margin-left: 0px;
            margin-right: 0px;
            background-color: Blue;
        } 
        
    </style>
</head>
<body style="margin-top: 0px;">
     
    <div class="divOne">
        <div class="divTwo">
            590
        </div>
        <div class="divThree">
            590 -- pl5;pr5
        </div>
        <div class="divfour">
            600
        </div>
        <div class="divfive">
            600 -- ml5;mr5
        </div>
        <div class="divsix">
            605
        </div>
    </div>
</body>
</html>