- 26
- 0
- 约 6页
- 2016-11-22 发布于河南
- 举报
CSS box盒子模型详细解释(margin,panding的区别)
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
原创力文档

文档评论(0)