解决子div设置margin-top使父div也跟着向下移动的问题

た入场券 2023-08-17 16:49 83阅读 0赞

直接看代码

*  html：

*  css

body{
       			margin:0;
                padding:0;
       			}
       	.main{
       			width:200px;
       			height:200px;
       			background:tomato;
       			}
       	.content{
       	       margin-top: 30px;
       		   width:100px;
       		   height:100px;
       		   background:skyblue;
       			}

原图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]  
给子元素设置margin-top: 30px之后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 1]

*  原理  
    一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
 *  解决方案  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 2]  
    1.为父div设置border,我为父div设置border-top:1px solid tomato,理论上还得让父元素高度减去1px;  
    2.为父div设置padding-top:1px,理论上还得让父元素高度减去1px;  
    3.为父div设置overflow: hidden;(推荐使用这个)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]: /images/20230809/737b36aeb0544a54b8db5111420375f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 1]: /images/20230809/64d15340b9f64ed988982cca96697bd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 2]: /images/20230809/ae691248b98844b3856126bf7923c60f.png