解决嵌套块级元素垂直外边距的塌陷

最新推荐文章于 2023-04-12 16:47:42 发布

岁月可贵

最新推荐文章于 2023-04-12 16:47:42 发布

阅读量361

点赞数 4

分类专栏： css笔记文章标签： 1024程序员节 css html css3

本文链接：https://blog.csdn.net/weixin_44659458/article/details/109260910

版权

css笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

问题引入

此时，要实现的内容是在一个盒子里面在嵌套一个盒子并且距离外层盒子的上边距为100px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>嵌套块级元素垂直外边距的塌陷</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: green;
				}
			.sbox{
				width: 100px;
				height: 100px;
				background-color: red;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
	   <div class="box">
	   	<div class="sbox">
	   		
	   	</div>
	   </div>
	</body>
</html>

在这里插入图片描述
很明显：子盒子是相对于浏览器的margin-top:100px;而不是相对于父盒子。

此时，我们可能会想到通过绝对定位的方式来解决这个问题。这种想法也可以解决。但有其他三种方法可以解决。

解决方法一：可以为父元素定义边框
border: 1px solid green;
解决方法二：可以为父元素定义内边距
padding-top: 100px;(需要修改盒子的高度及子元素的外边距)
解决方法三：可以为父元素添加overflow属性
overflow: hidden;

在这里插入图片描述
七、外边距重叠问题（补充）（详细）

欢迎访问我的个人博客

岁月可贵

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
解决嵌套块级元素垂直外边距的塌陷

问题引入此时，要实现的内容是在一个盒子里面在嵌套一个盒子并且距离外层盒子的上边距为100px;<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>嵌套块级元素垂直外边距的塌陷</title> <style type="text/css"> .box{ width: 300px; height: 300px;
复制链接

扫一扫