css案例学习之父子块的margin

两边还会有些距离，这是body默认的。

代码：

<head>
<title>父子块的margin</title>
<style type="text/css">
/* body{
    margin:0 0;
} */
div.father{                        /* 父div */
    background-color:#fffebb;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:10px;
    border:1px solid #000000;
}
div.son{                        /* 子div */
    background-color:#a2d2ff;
    margin-top:30px;
    margin-bottom:0px;
    padding:15px;
    border:1px dashed #004993;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son">子div</div>
    </div>
</body>

两边没有了距离

<head>
<title>父子块的margin</title>
<style type="text/css">
 body{
    margin:0 0;
} 
div.father{                        /* 父div */
    background-color:#fffebb;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:10px;
    border:1px solid #000000;
}
div.son{                        /* 子div */
    background-color:#a2d2ff;
    margin-top:30px;
    margin-bottom:0px;
    padding:15px;
    border:1px dashed #004993;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son">子div</div>
    </div>
</body>

说明：子元素只能在父元素允许的空间中活动。默认情况下会自动填满父元素。

撑破了

代码：

<head>
<title>设置父块的高度</title>
<style type="text/css">
div.father{                        /* 父div */
    background-color:#fffebb;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:10px;
    border:1px solid #000000;
    height:40px;                /* 设置父div的高度 */
}
div.son{                        /* 子div */
    background-color:#a2d2ff;
    margin-top:40px; margin-bottom:0px;
    padding:15px;
    border:1px dashed #004993;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son">子div</div>
    </div>
</body>

说明：设置父元素高度为40px，子元素在处理margin-top时，撑破了父元素。

代码：

<head>
<title>设置父块的高度</title>
<style type="text/css">
div.father{                        /* 父div */
    background-color:#fffebb;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:10px;
    border:1px solid #000000;
    height:40px;                /* 设置父div的高度 */
    width: 400px;
}
div.son{                        /* 子div */
    background-color:#a2d2ff;
    margin-top:40px; margin-bottom:0px;
    margin-left:400px;   /*宽度有很大的伸缩空间，超过宽度也会被撑破*/
    padding:15px;
    border:1px dashed #004993;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son">子div</div>
    </div>
</body>

说明：宽度也会被撑破，不过有很大的弹性空间

相关阅读:
u-boot启动流程分析(1)_平台相关部分
 Linux文件系统简介
 PHP将部分内容替换成星号
 自制jQuery焦点图切换简易插件
 一次解决页面特效问题的排查记录
 自制jQuery标签插件
 一套后台管理html模版
 自制jquery可编辑的下拉框
 注册页面的一些记录
 CSS选择器的一些记录
原文地址：https://www.cnblogs.com/jiqing9006/p/4987581.html