css之margin拖拽

margin拖拽,又叫 margin-top传递
父子级包含的时候子级的margin-top会传递给父级(会传给最后一层父级)
解决方案

eg:<div>
          <p></p>
     </div>

1.父级给padding-top(推荐)

div{ width:400px; height:390px; background:red; padding-top:10px; }
p{ width:200px; height:200px; background:pink; }

2.给父级加overflow:hidden;子级加margin-top

div{ width:400px; height:400px; background:red; overflow:hidden; }
p{ width:200px; height:200px; background:pink; margin-top:10px; }

3.给父级加border:1px solid red;子级加margin-top

div{ width:398px; height:398px; background:red; border:1px solid #ccc; }
p{ width:200px; height:200px; background:pink; margin-top:10px; }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容