css中margin的一些易忽略的问题

最新推荐文章于 2021-10-07 16:32:04 发布

原创最新推荐文章于 2021-10-07 16:32:04 发布 · 996 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #margin #百分比

前端专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨CSS布局中百分比margin-top的特性，解释为何其值不随父元素高度变化而变化，并通过实例展示解决方法。重点强调在不同场景下布局元素的相对定位和响应式设计的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<style type="text/css">
	.big{
		width:200px;
		height:200px;
		background:pink;
	}
	.small{ width:50px;
		height:50px;
		background:green;
		margin-top:50px;
	}
</style>

<div class="big">
<span style="white-space:pre">	</span><div class="small"></div>
</div>

效果如下：

内部.small的div设置margin-top为50px后，连同外部的div会一起向下移动50px，要想保持外部div不动，可以将.small的div设置float：left样式；

但是当margin-top设置为百分比时就完全不一样了

代码如下

<style type="text/css">
	html,body{height:100%;}
	.big{
		width:200px;
		height:10%;
		background:pink;
	}
	.small{ width:50px;
		height:60%;
		background:green;
		margin-top:50%;
	}
</style>

<div class="big">
<span style="white-space:pre">	</span><div class="small"></div>
</div>

效果如下：

margin-top本来是相对于父元素而言的，但是通过开发者工具查看，两个div的高度是随着窗口的大小变化而变化的，但是margin-top的值却保持不变，经过测量，基本为百分比的2倍高度，即使.small的div设置了float：left，只能保证父级div位置不变，其margin-top值依然不变为百分比的2倍

如下图所示：

<style type="text/css">
	.big{
		width:200px;
		height:300px;
		background:pink;
	}
	.small{ width:50px;
		height:50px;
		background:green;
		margin-top:50%;
	}
</style>

<pre name="code" class="html"><div class="big">
<span>	</span><div class="small"></div>
</div>

.big的div和.small的div均设置成固定长宽后，margin-top为百分比，无论父级div高度如何变化，结果显示margin-top的值不变，依然为百分比的2倍

如下如：