1-1-1html实例代码

最新推荐文章于 2021-10-05 22:21:22 发布

Raquel1993

最新推荐文章于 2021-10-05 22:21:22 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u014305060/article/details/52006705

这是一个HTML代码示例，演示了不同大小和样式的嵌套div元素布局。每个div都有独特的尺寸、边框样式、背景颜色以及内边距设置。通过此实例，可以了解CSS中margin和padding对元素位置的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
#n1{
width:405px;
height:405px;
border: 1px dashed black;
margin:100px auto;
}
#n2{
	width: 340px;
	height: 340px;
	border: 6px solid blue;
	margin: 29px auto;
	background: green;
} 
#n3{
	width: 260px;
	height: 260px;
	background: pink;
	margin: 21px auto;
	padding-top: 41px;
	padding-left: 41px;
}
#n4{
	width: 214px;
	height: 214px;
	border: 1px dotted white;
	padding-left: 4px;
	padding-top: 4px;
}
#n5{
	width: 161px;
	height: 161px;
	border: 1px dashed white;
	padding-top: 49px;
	padding-left:49px;
}
#n6{
	width: 100px;
	height: 100px;
	background: red;
	border: 6px solid green;
}
</style>

</head>
<body>
  <div id="n1">
                <div id="n2">
                        <div id="n3">
							<div id="n4">
								<div id="n5">
									<div id="n6">
										<div id="n7"></div>
									</div>
								</div>
							</div>
                        </div>
                </div>
        </div>
</body>
</html>

注意：子集margin-top传递给父集，使用padding-top