盒子模型

最新推荐文章于 2024-06-22 17:15:40 发布

拙劣。

最新推荐文章于 2024-06-22 17:15:40 发布

阅读量156

点赞数

分类专栏：边框文章标签：盒子模型

本文链接：https://blog.csdn.net/weixin_44017414/article/details/85092116

版权

边框专栏收录该内容

3 篇文章 0 订阅

订阅专栏

① padding:用于控制内容与边框之间的距离;

margin: 用于控制元素与元素之间的距离;

② margin垂直方向bug：
           一、子元素设置margin-top父元素塌陷
           1、在父元素设置margin-top（记得调整所要设置的距离）。
           2、在父元素直接设置pading-top多远即可。
           二、元素与元素之间垂直方向的margin问题。
           1、上下元素之间margin-top/margin-bottom取最大值，不是相加。
           三、行内元素垂直方向的margin无效，可在相邻元素进行设置

③ 当一个盒子存在于另一个盒子内时，子元素的margin与父元素的padding都是相对于彼此存在的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>初学盒子</title>
		<style type="text/css">	
			*{
				padding: 0px;
				margin: 0px;
			}
			.box{
				background: lightblue;
				border: 10px dashed green;
				/*padding: 10px 50px 100px 150px;*/
				padding-bottom: 10px;
				padding-top: 20px;
				padding-left: 50px;
				padding-right: 30px;
				/*margin: 10px 50px 100px 120px;*/
				/*margin-top: 20px;
				margin-bottom: 50px;
				margin-left: 200px;
				margin-right: 200px;*/
				/*margin-bottom: 60px;*/
			}
			.box2{
				height: 100px;
				background: red;
				border-top: 1px solid red;
				/*padding-top: 50px;*/
				/*margin-top: 60px;*/
				margin-bottom: 50px;
				
			}
			.box2-inner{
				margin-top: 49px;
				height: 30px;
				background: rgba(0,0,0,0.9);
			}
			.spn{
				background: lightblue;
				/*无效*/
				
			
		</style>
	</head>
	<body>
		
		<div class="box">我是div标签</div>
		<div class="box2">
			<div class="box2-inner"></div>
		</div>
		<span class="spn">我是span标签</span>
		
	</body>
</html>

运行效果如下：

拙劣。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型

① padding:用于控制内容与边框之间的距离; margin: 用于控制元素与元素之间的距离; ② margin垂直方向bug：一、子元素设置margin-top父元素塌陷 1、在父元素设置margin-top（记得调整所要设置的距离）。 2、在父元素直接设置pading-top多远即可。 ...
复制链接

扫一扫