2024年4月8日发(作者：)

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: