目标效果分析图

图例分上下两个盒子

下面的盒子里又放三个图文容器

容器间有间距
前端开发 margin外边距 0229_盒子模型

盒子模型

前端开发 margin外边距 0229_图例_02

边距的效果

没有边距的情况

前端开发 margin外边距 0229_盒子模型_03

要让图片分开,给加上边距就可

前端开发 margin外边距 0229_图例_04

加上以后的效果

前端开发 margin外边距 0229_外边距_05

开始代码

前端开发 margin外边距 0229_边距_06

前端开发 margin外边距 0229_外边距_07

浮动并且加边距

前端开发 margin外边距 0229_边距_08

前端开发 margin外边距 0229_外边距_09

让图片内容水平居中

给浮动的内容添加外容器

让外容器水平居中
前端开发 margin外边距 0229_图例_10

前端开发 margin外边距 0229_外边距_11

margin外边距的使用

前端开发 margin外边距 0229_图例_12