两边还会有些距离,这是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>

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

css案例学习之父子块的margin的更多相关文章

  1. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  2. css案例学习之float浮动

    代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  3. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  4. CSS 案例学习

    1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...

  5. css案例学习之用thead、tbody、tfoot实现漂亮的table布局

    首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...

  6. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  7. css案例学习之通过relative与absolute实现带说明信息的菜单

    效果如下 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. css案例学习之div a实现立体菜单

    效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  9. css案例学习之双斜角横线菜单

    效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

随机推荐

  1. SQL Server SQLOS

    SQLOS 抽象出了: 1.任务高度管理子系统. 2.内存管理子系统. 3.错误,异常处理机制. 4.死锁侦测各解决机制. 5.运行第三方代码. 好处: 1.减少线种的上下文切换.空闲连接不占用线程.

  2. DataGridView添加复选框并向其中绑定值

    //DataGridview绑定数据 public void DataGridViewBandingData() { string year = this.CMB_year.SelectedValue ...

  3. EF6.0 自定义Code First约定

    自定义Code First约定有三种方式,分别是:Lightweight Conventions(轻量级约定).Configuration Conventions(配置型约定).Model-based ...

  4. Delphi与Javascript的交互

    网络上也有人写了关于Delphi与Javascript的文章,其大多数使用ScriptControl等,均无法达到与Delphi自身融合的效果.我也是在翻阅自己的组件库的时候发现了这个以前收集来的代码 ...

  5. 知道版本对于出0day后批量攻击dedecms有非常大的帮助,先判断版本再选择相应exp,效率大增

    需要知道织梦网站版本URL路径后面添加/data/admin/ver.txt 例如:http://www.dedecms.com/data/admin/ver.txt 20100708是最新版本5.6 ...

  6. C语言的本质(28)——C语言与汇编之用汇编写一个Helloword

    为了更加深入理解C语言的本质,我们需要学习一些汇编相关的知识.作为最基本的编程语言之一,汇编语言虽然应用的范围不算很广,但是非常重要.因为它能够完成许多其它语言所无法完成的功能.就拿 Linux 内核 ...

  7. Python with ASP

    Python with ASP Python with ASP

  8. Linux下将多个静态库(.a)合并成一个静态库文件(.a)的命令操作,方法一

    .a 文件的结构和.tar文件就没有什么区别. x 命令解出来, a 命令添加, t命令列表 假设A.a, B.a C.a 在/usr/local/lib目录下 mkdir /tmp/libABC c ...

  9. Codeforces 433 C. Ryouko&#39;s Memory Note

    C. Ryouko's Memory Note time limit per test 1 second memory limit per test 256 megabytes input stand ...

  10. 呵呵!手把手带你在 IIS 上执行 Python

    公司的站点让我头痛死了.在众多前辈高手的带领下.一大堆的 CMD 在站点里执行得好好地,黑客攻击也好好地.仅仅有站点和我不好好地,我快累死了,站点快挂了.. . 为了解决问题.我想到了 Python ...