欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css中margin传递问题

程序员文章站 2022-04-01 07:57:50
...
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
            margin: 0;
            padding: 0;
        }
        .father
        {
        	width: 200px;
        	height: 200px;
        	background: red;
        	/*border: 1px solid blue;*/
        	overflow: hidden;
        	*zoom:1;
        }
        .son
        {
        	width: 200px;
        	height: 100px;
        	background: yellow;
        	margin-top: 100px;
        }
	</style>
</head>
<body>
<!--
1.在父子元素中, 如果给子元素设置了margin-top, 默认会传递到父元素

2.解决方案:
2.1给父元素设置边框
2.2给父元素添加两行代码
overflow: hidden;
*zoom: 1;
-->
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>