CSS常见问题：经典bug——margin塌陷

最新推荐文章于 2024-05-07 14:55:18 发布

渣猫略懂

最新推荐文章于 2024-05-07 14:55:18 发布

阅读量89

点赞数

分类专栏：前端基础文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_52854090/article/details/120636510

版权

前端基础专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 500px;
				height: 500px;
				background-color: #0000FF;
				/* 解决方案1：给父级设置上边框,transparent表示边框颜色透明
				 但是有边框像素问题，导致整个盒子的像素发生变化*/
				border-top: 1px solid transparent;
				/* 解决方案2：给父元素增加overflow:hidden清除异常属性 */
				overflow: hidden; 
				/* padding-top: 100px; */
				/* 解决方案3：父元素使用padding,但是有撑大盒子问题，麻烦不推荐 */
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: #006400;
				/* margin塌陷，子元素设置margin-top时会带着父级元素一并更改位置，左侧没有变化 */
				margin-top: 100px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				
			</div>
		</div>
	</body>
</html>

解决方案3参考：CSS基础：盒子模型&padding撑大盒子_weixin_52854090的博客-CSDN博客<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 盒子模型分为三个部分：从内至外分别是：盒子内容、盒子内边距padding、盒子边框border、盒子外边距margin 每个属性都有四个方向：上top、右right、下bottom、左left*/ .https://blog.csdn.net/weixin_52854090/article/details/120632581

渣猫略懂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常见问题：经典bug——margin塌陷

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ width: 500px; height: 500px; background-color: #0000FF; /* 解决方案1：给父级设置上边框,transparent表示.
复制链接

扫一扫