CSS网页布局的核心内容:CSS盒模型
间的距离。内边距(padding)和外边距(margin)很相似,都是不可见的盒子组成部分,只不过内边距(padding)和外边距(margin)之间夹着边框。在D:\web\目录下创建网页文件(XHTML1.0),命名为box_padding.htm,编写box_padding.htm文件代码如代码11.19所示。
代码11.19 内边距的设置:box_padding.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>内边距的设置</title> <style type="text/css"> * {margin: 0px;} #all{width:360px; height:300px; margin:0px auto; padding:25px; background-color:#ccc;} #a,#b,#c,#d,#e,#f,#g{width:160px; height:50px; border:1px solid #000; background-color:#eee;} p{width:80px; height:30px; padding-top:15px; background-color:#cc9;} #a{padding-left:50px;} #b{padding-top:50px;} #c{padding-right:50px;} #d{padding-bottom:50px;} </style> </head> <body> <p id="all"> <p id="a"> <p>a盒子</p> </p> <p id="b"> <p>b盒子</p> </p> <p id="c"> <p>c盒子</p> </p> <p id="d"> <p>d盒子</p> </p> </p> |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |