内外边距对行内元素块级元素的影响

最新推荐文章于 2023-01-16 17:48:39 发布

PethZhang

最新推荐文章于 2023-01-16 17:48:39 发布

阅读量2.3k

点赞数 2

分类专栏：笔记和案例

本文链接：https://blog.csdn.net/PethZhang/article/details/78280344

版权

笔记和案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、内边距对父级元素的影响

当块级元素里面还是块级元素且没有定义宽高时，子块级元素的内边距会将父块级元素撑开；

但是当子元素为行内元素的时候，内边距对父级元素是无影响的。

如下例：

div和span的内边距对父级div的影响

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		.d1{
			
			border: solid 1px red;
		}
		.d2{
			
			border: solid 1px blue; 
			padding: 100px;
		}
		a{
		   padding: 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
		}
		.s1{
			border: 1px solid yellow;
			padding: 20px;
		}
		</style>
	</head>
	<body>
		<div class="d1">
			<div class="d2">这是一段测试文本</div>
		</div>
		<div class="d1">
			<span class="s1">这是一段测试文本</span>
		</div>
	</body>
</html>

当腹肌元素限定了宽高时，子元素的内外边距对父级元素都无影响，但是会出现溢出的情况。

2、外边距的特殊情况：

想要实现子元素在父元素中分离：

使用margin-top后却是下面的效果：

这就是在（1）、第一个子元素的外边距（2）、父级元素无边框等的遮挡时会出现的情况。

解决办法：

（1）、给父级元素添加透明边框，但是会影响父级元素的尺寸，若想保持原有的尺寸，应在原有尺寸上减去边框的尺寸；

（2）、父级元素添加<table></table>空元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		.d1{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.d2{
			width: 100px;
			height: 100px;
			background-color: blue;
			margin:20px;
		}
		a{
		   padding: 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
		}
		.s1{
			border: 1px solid yellow;
			padding: 20px;
		}
		</style>
	</head>
	<body>
		<div class="d1">
			<div class="d2"></div>
		</div>
	</body>
</html>

PethZhang

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内外边距对行内元素块级元素的影响

1、内边距对父级元素的影响当块级元素里面还是块级元素且没有定义宽高时，子块级元素的内边距会将父块级元素撑开；但是当子元素为行内元素的时候，内边距对父级元素是无影响的。如下例：div和span的内边距对父级div的影响 .d1{ border: solid 1px red; } .d2{ border: solid
复制链接

扫一扫