第11章CSS3美化背景与边框.ppt

11.3 内外边距的相关属性 11.3.1 设置内边距 11.3.2 设置外边距 11.3.1 设置内边距 内边距也就是对象的内容与对象边框之间的距离，它可以通过padding属性进行设置。该属性可指定1至4个属性值，各属性值以空格分隔。padding属性的语法格式如下： padding : length; length：百分比或是长度数值。百分数是基于父对象的宽度。 padding属性可以通过以下几种方式设置对象的内边距： 提供4个属性值，分别用于按照上、右、下、左的顺序依次指定内边距。 只设置一个属性值，用于设置全部的内边距。 提供两个属性值，这时第一个用于设置上、下方向内边距，第二个用于设置左、右方向的内边距。 设置3个属性值，第一个用于设置上方的内边距，第二个用于设置左、右方向的内边距，第三个用于设置下方的内边距。 【例11-16】 应用padding属性设置tb标记的全部内边距均为5px。 html head titlepadding属性/title meta http-equiv=Content-Type content=text/html; charset=utf-8 / style td{ padding:5px; /*设置单元格的内边距全部为5像素*/ /style /head body table width=98% border=0 align=center cellpadding=0 cellspacing=1 bgcolor=#3F873B tr bgcolor=#D9EE9F align=center td width=12%字条编号/td td width=14%祝福对象/td td width=11%祝福者/td td width=35%字条内容/td td width=21%发送时间/td /tr tr bgcolor=#E8F3D1 td align=center1/td td align=center 琦琦/td td align=centerwgh/td td 愿你健康、快乐的成长！/td td align=center2011-4-2 15:30 /td /tr /table /body /html 在IE浏览器的运行结果如图11-20所示。 图11-20 为tb标记设置内边距 说明： CSS样式中还提供了padding-top、padding-right、padding-bottom和padding-left 4个属性用于单独指定某一个方向的内边距。 11.3.2 设置外边距 外边距也就是对象与对象之间的距离，它可以通过margin属性进行设置。该属性可指定1至4个属性值，各属性值以空格分隔。margin属性的语法格式如下： margin : auto | length; auto：表示默认的外边距。 length：百分比或是长度数值。 margin属性可以通过以下几种方式设置对象的外边距： 提供4个属性值，分别用于按照上、右、下、左的顺序依次指定外边距。 只设置一个属性值，用于设置全部的外边距。 提供两个属性值，这时第一个用于设置上、下方向外边距，第二个用于设置左、右方向的外边距。 设置3个属性值，第一个用于设置上方的外边距，第二个用于设置左、右方向的外边距，第三个用于设置下方的外边距。 【例11-17】 应用margin属性设置body标记的外边距为0px，设置图片的上、下外边距为5px，左右外边距为10px。 !DOCTYPE HTML html head titlemargin属性/title meta charset=utf-8 / style img{ float:left; /*设置浮动在左边*/ margin:5px 10px; /*设置上下外边距为5px、左右外边距为10px*/ } /style /head body style=margin:0px img src=images/flower4.jpg width=133 height=97 border=1nbsp;nbsp;nbsp;nbsp;编程词典系列软件是为各类爱好编程者和各级程序开发人员提供了学、查、用为一体的数字化编程软件。主要内容有技术资源库、实例资源库、项目资源库、视频资源库、源码资源库、方案资源库、界面资源库、实用工具集等等，真正意义上实现了轻松学习，快速开发。 /body /html 在IE浏览器的运行结果如图11-21所示。