magin写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
width: 404px;
height: 404px;
border: 1px dashed black;
margin: 0 auto;
}
#d2{
width: 340px;
height: 340px;
border: 5px solid rgb(213,239,253);
margin-left: 27px;
margin-top: 27px;
}
#d3{
width: 299px;
height: 299px;
background-color: rgb(255,159,221);
border: 1px solid rgb(255,159,221);
margin-left: 20px;
margin-top: 20px;
}
#d4{
width: 216px;
height: 216px;
border: 1px dotted white;
margin-left: 41px;
margin-top: 41px;
}
#d5{
width: 208px;
height: 208px;
border: 1px dashed white;
margin-left: 3px;
margin-top: 3px;
}
#d6{
width: 100px;
height: 100px;
background-color: rgb(134,255,82);
border: 5px solid rgb(251,255,67);
margin-left: 49px;
margin-top: 49px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3">
<div id="d4">
<div id="d5">
<div id="d6"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
padding写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#p1{
width: 350px;
border: 1px dashed black;
padding: 27px;
}
#p2{
border: 5px solid rgb(213,239,253);
padding: 20px;
}
#p3{
background-color: rgb(255,159,221);
padding: 41px;
}
#p4{
border: 1px dotted white;
padding: 3px;
}
#p5{
border: 1px dashed white;
padding: 49px;
}
#p6{
height: 100px;
background-color: rgb(134,255,82);
border: 5px solid rgb(251,255,67);
}
</style>
</head>
<body>
<div id="p1">
<div id="p2">
<div id="p3">
<div id="p4">
<div id="p5">
<div id="p6"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
网友评论