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
- 英国伦敦
- 印度海滨
- 世界名车
- 世界新款
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; 就可以看到高度,虽然没有设置高度,如下图:
页面嵌入图片和文字的整体效果图: