码迷,mamicode.com
首页 > 其他好文 > 详细

margin+padding

时间:2018-11-03 01:53:31      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:str   width   20px   ima   方向   嵌套   padding   gre   color   

1.外边距合并:只有在垂直方向上会发生

例:子margin-top > 父margin-top

        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 20px;
            height: 20px;
            background-color: red;
            margin-top: 10px;
        }
        .children{
            width: 10px;
            height: 10px;
            background-color: green;
            margin-top: 20px;
        }
    <div class="parent">
        <div class="children"></div>
    </div>

效果图:

 技术分享图片

2.在布局中的应用

margin:通常用来设置此元素与相邻元素或父元素边框的距离(盒子与 盒子之间的距离)

padding:通常用来设置内容显示的区域

另:通常子元素的margin可以用父元素的padding代替,以此减少不必要的嵌套

margin+padding

标签:str   width   20px   ima   方向   嵌套   padding   gre   color   

原文地址:https://www.cnblogs.com/zgdawdl/p/9898966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!