XML应用开发（软件品牌）-1期 使用CSS容器属性显示XML文档-边距属性margi 4.9 案例分析-使用CSS容器属性显示XML文档-边距属性margin和补白属性padding.doc

《XML应用开发》教学案例 软件学院 第 PAGE 1 页 = numpages 4 3 3 页 《单元四 使用CSS显示XML文档》教学案例 ——4.9 使用CSS容器属性显示XML文档-边距属性margin和补白属性padding 知识点 边距属性margin、补白属性padding。 技能点 能正确使用CSS容器属性显示XML文档。 知识介绍 1、边距设置属性margin margin-top：设置上页边距 margin-bottom：设置下页边距 margin-left：设置左页边距 margin-right：设置右的页边距 margin：设置四边页边距 2、补白属性padding 指定边框和内部元素的间距，可以使用padding、padding-top、padding-right、padding-bottom和padding-left五个属性来指定，属性值为绝对长度或父元素宽度的百分比。 案例说明 本案例中使用到的XML文档book.xml和border.css的文件的讲解是基于上一讲案例分析“使用CSS显示XML文档-边框属性border” 基础上的。 【文件】:book.xml ?xml version=1.0 encoding=gb2312? ?xml-stylesheet type=text/css href=border.css? Book Title软件工程（第二版）/Title Author邓良松 刘海岩 陆丽娜/Author /Book 案例1（border.css）：使用padding进行内容补白。 【案例分析】： 使用“padding-top:20px;”设置title元素与其内部元素上边距离20px。 【代码实现】： title,Author{ display:block; } title{ border-style:dotted; border-top-width:10px; border-top-color:red; padding-top:20px; } Author{ border:3px solid #999; } 案例2（border.css）：使用margin属性设置边距。 【案例分析】： 使用 “margin:40px 50px 60px 80px;”为元素Author设置四个边的边距，上边距为40px,右边距为50px,下边距为60px,左边距为80px。如果空白区举例大于50像素，则显示为默认距离。 【代码实现】： title,Author{ display:block; } title{ border-style:dotted; border-top-width:10px; border-top-color:red; padding-top:20px; } Author{ border:3px solid #999; margin:40px 50px 60px 80px; }