前端HTML中盒模型margin的两个注意事项

钱端攻城狮

已于 2022-02-28 17:42:15 修改

阅读量335

点赞数

分类专栏： HTML 文章标签： html css css3

于 2022-02-17 20:05:36 首次发布

本文链接：https://blog.csdn.net/m0_54932975/article/details/122990439

版权

HTML 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

注意margin在块和行中的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#one{
				background:pink ;
				width: 300px;
				height: 300px;
				margin-bottom: 50px;
			}
			#two{
				background-color: deeppink;
				width: 300px;;
				height: 300px;
				margin-top: 100px;
			}
			#s1,#s2{
				background-color: yellow;
				margin-top: 50px;
				/*padding: 50px;*/
			}
			#s1{
				margin-right: 50px;
			}
			#s2{
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<!--块元素   margin上下取最大值   左右取和-->
		<div id="one">
			遇事不决，可问春风。
		</div>
		<div id="two">
			春风不语，可随本心。
		</div>
		<!--行元素   margin上下无效    左右取和   padding正常 使用-->
		<span id="s1">
			行元素11111111
		</span>
		<span id="s2">
			行元素22222222
		</span>
	</body>
</html>

运行结果：
在这里插入图片描述

用margin-top给第一个子代设置时属性会传给父级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#div1{
				background-color: blue;
			}
			#box{
				/*父子用padding兄弟用margin*/
				width: 1000px;
				height: 1000px;
				background-color: pink;
				/*方式一 给父类标签设置边框border 阻断top值传递*/
				/*border: 1px solid skyblue;*/
				/*方式二 给父级设置overflow:hidden;溢出部分隐藏*/
				/*overflow: hidden;*/
				/*最佳方案 以后父子间隔 给父级设置padding*/
				padding-top: 30px ;/*这样就不用再给第一个子标签设置marign值了*/
				
			}
			#one{
				/*margin—top属性会传给父类*/
				/*margin-top: 50px;*/
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#two{
				width: 200px;
				height: 200px;
				background-color: orange;
			}
			#three{
				width: 300px;
				height: 300px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="div1">哈哈哈</div>
		<div id="box">
			<div id="one">
				11111111
			</div>
			<div id="two">
				22222222
			</div>
			<div id="three">
				33333333
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述