嵌套块元素垂直外边距的合并（塌陷）

- 日理万妓 2023-02-16 14:30 20阅读 0赞

*  对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
 *  父元素的上外边距会与子元素的上外边距发生合并
 *  合并后的外边距为两者中的较大者  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]  
    **解决方案：**

1.  可以为父元素定义上边框。
2.  可以为父元素定义上内边距
3.  可以为父元素添加overflow:hidden。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { 
    			width: 500px;
    			height: 500px;
    			background-color: pink;
    			/*嵌套关系 垂直外边距合并 解决方案 */
    			/*1. 可以为父元素定义上边框 transparent 透明*/
    			/*border-top: 1px solid transparent;*/
    			/*2. 可以给父级指定一个 上 padding值*/
    			/*padding-top: 1px; */
    			/*3. 可以为父元素添加overflow:hidden。*/
    			overflow: hidden;
    		}
    		.son { 
    			width: 200px;
    			height: 200px;
    			background-color: purple;
    			margin-top: 100px;
    		}
    	</style>
    </head>
    <body>
    	<div class="father">
    		<div class="son"></div>
    	</div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020061011410713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200610113823459.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1,size_16,color_FFFFFF,t_70