CSS margin,padding详解 Box Model详细图解.doc

CSS margin,padding详解 Box Model详细图解.doc

  1. 1、本文档共6页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
CSS margin,padding详解 Box Model详细图解

CSS margin,padding详解 Box Model详细图解 2009年08月13日 星期四 05:57 P.M. About Box Model: 一个块级元素由content, padding, background, border, margin五个部分组成. 立体图1如下: THE CSS BOX MODEL : 平面图2如下: 根据以上两图, 相信大家对于Box model会有个直观的认识. 以下说明margin和padding属性: 1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 对于2所示的上右下左margin值均为40px, 因此代码为: margin-top: 40px; margin-right: 40px; margin-bottom: 40px; margin-left: 40px; 根据上, 右, 下, 左的顺时针规则, 简写为 margin: 40px 40px 40px 40px; 为便于记忆, 请参考下图3: 当上下, 左右margin值分别一致, 可简写为: margin: 40px 40px; 前一个40px代表上下margin值, 后一个40px代表左右margin值. 当上下左右margin值均一致, 可简写为: margin: 40px;?? 2. Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离, 其代码与margin属性的写法比较类似. 至此, 已经基本了解margin和padding属性的基本用法. 但是, 在实际应用中, 却总是发生一些让你琢磨不透的事, 而它们又或多或少的与margin有关. ************************************************************************************************* 注: 当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 建议你尽量使用padding-top/bottom来达到你的目的, 这是因为css中存在Collapsing margins(折叠的margins)的现象. Collapsing margins: margins折叠现象只存在于临近或有从属关系的元素, 垂直方向的margin中. 文字说明可能让人费解, 下面用一个例子说明margin-collapsing现象. 例: 在html文件的body/body之间写入如下代码: div id=”ID1″ h1 id=”ID2″Margins of ID1 and ID2 collapse vertically.br/元素ID1与ID2的margins在垂直方向折叠./h1 /div 在与其外联的css文件中写入: * { padding:0; margin:0; } #ID1 { background-color: #333;???? //背景色 color: #FFF;?????????????????????????? //字体色 margin-top: 10px; margin-bottom: 10px; } #ID2 { font: normal 14px/1.5 Verdana, sans-serif; margin-top: 30px; margin-bottom: 30px; border: 1px solid #F00; } 代码解释: 1. 在html写入的代码表示, 在html中插入id分别为ID1和ID2的两个块级元素div, h1; 2. *{padding:0; margin:0;}: 使浏览器默认的元素padding和margin值均归零; 3. #ID1{…}: 使id为ID1的元素div的背景颜色为#333, 字体颜色为#FFF, margin-top/bottom为10px; 4. #ID2{…}: 使id为ID2的元素h1的字体大小为14px, verdana字体, 行高为字体高的150%, 正常粗细. margin-top/bottom为30px, 边框为1px宽, 红色实线. 依据以上解释, 我们应该得到如下效果3: 即ID1的 margin-top/bottom=ab=ef=10px; ??? ID2的 margin-top/bottom=bc

文档评论(0)

xcs88858 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

版权声明书
用户编号:8130065136000003

1亿VIP精品文档

相关文档