美文网首页css基础
css之margin拖拽

css之margin拖拽

作者: 幺七 | 来源:发表于2018-04-01 14:09 被阅读0次

    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; }
    

    相关文章

      网友评论

        本文标题:css之margin拖拽

        本文链接:https://www.haomeiwen.com/subject/twnocftx.html