padding
padding: 10px; 表示上下左右的内边距都是10像素
padding: 0 10px; 表示左右的内边距为10像素
padding: 5px 6px 10px; 5 是上内边距像素 6 是左右内边距像素， 10 是下边距像素。
padding: 4px 5px 6px 10px; 4 是上边距 5右边距 6 是下边距，10 是左边距 顺时针旋转 但是内边距像素值不可以为负数，负数无效。
margin
margin:是外边距，是一个盒子与另外一个盒子的距离
margin:没有浮动的情况下 上下叠加，取大值。有浮动的情况下，两个外边距相加
例如：
第一个盒子的样式
.div01 {
width:300px;
height:100px;
background-color:gray;
margin:20px;
}
第二个盒子的样式
.div02 {
width:300px;
height:100px;
background-color:red;
margin:100px 0px 0px 20px;
}
如上图所示，理论上上面的margin 20px 和下面的margin 100 应该相加等于120，但是这里注意了，取100（较大的值）作为这2个盒子的距离。
第一个盒子的样式
.div01 {
width:300px;
height:100px;
background-color:gray;
margin:20px;
}
第二个盒子的样式
.div02 {
width:300px;
height:100px;
background-color:red;
margin:100px 0px 0px 20px;
float:left; -- 加入浮动
}
如果上图所示 div02加入的浮动 float:left; 外边距不是取大值，而是相加
思考如果margin为负数生效吗？
例如：
.div01 {
width:300px;
height:100px;
background-color:gray;
padding:0px;
margin-bottom:150px; -- 下边距为150px
}
.div02 {
width:300px;
height:100px;
background-color:red;
padding:0px;
margin-top:-50px; -- 上边距为-50
}
如图所示 margin为负数是生效的
如何在页面上嵌入图片
html
<link rel="stylesheet" href="css/demo.css" type="text/css" />
</head>
<body>
<div class="wrap">
<dl>
<dt><img src="images/b01.jpg"/></dt>
<dd>英国伦敦</dd>
</dl>
<dl>
<dt><img src="images/b02.jpg"/></dt>
<dd>印度海滨</dd>
</dl>
<dl>
<dt><img src="images/b03.jpg"/></dt>
<dd>世界名车</dd>
</dl>
<dl>
<dt><img src="images/b04.jpg"/></dt>
<dd>世界新款</dd>
</dl>
</div>
</body>1，首先清除页面的内外间距
*{
margin:0;
padding:0;
}
/*
1,1000px 是你想设置盒子的宽度
2，高度不写是因为图片会撑起高度
margin: 0 auto; 主要用于图片居中
浮动元素的父级加上 overflow:hidden 是为了处理内容高度的问题
*/
.wrap{
width:1000px;
margin: 0 auto;
overflow:hidden;
}
/*
1，通过ps绘图工具测量，图片的宽度为210px
2，如果你想让内容浮动，就让装东西的容器浮动就可以了，浮动也是为了让内容横向向左排列
其实图片实际的间距是40，但是靠边的那张图片只有20px，所以就
外间距（左右外间距）20px
*/
.wrap dl{
width:210px;
float:left;
margin:0 20px;
}
/*
用ps测量图片与问题之间的距离
*/
.wrap dt {
margin-bottom:19px;
}
/*
1，文字的行高是固定的，不管你是如何的放大字体，测量出来的
都是一样的
2，吸管吸取文字颜色的时候，一定要挑选文字颜色最深的那个
3，文字类型的样式是可以继承的
*/
.wrap dl dd {
font-size:12px;
line-height:22px;
color:#525252;
}在浮动元素的父标签设置overflow:hidden; 就可以看到高度，虽然没有设置高度，如下图：
页面嵌入图片和文字的整体效果图：
