6.3　图文混排

6.3　图文混排

1.使用CSS设置图文环绕

可以使用float、margin和padding属性使正文环绕一个图像。

（1）float：设置元素向左或向右浮动；

（2）margin：设置元素外间距，即从边框到其他元素的间距；

（3）padding：设置元素内间距，即元素到自己边框的间距。

设置图文环绕的代码如下：

运行结果如图6-4所示。

图6-4　CSS样式图文混排实例运行结果

2.应用CSS图像边框

HTML中img元素的border属性可以给图片加上边框，但是无法改变边框的颜色，无法设置边框线型，无法分别设置上、下、左、右4条边框的样式。CSS样式表更为灵活，可以通过CSS设置丰富的边框样式。边框属性见表6-1。

表6-1　边框属性

将图片上、下、左、右4条边框统一设置成宽3像素、实线、红色，代码如下：

运行结果如图6-5所示。

图6-5　CSS样式设置图片边框实例运行结果

分别设置图片上、下、左、右不同效果的边框样式，代码如下：

运行结果如图6-6所示。

图6-6　CSS样式设置图片不同边框实例运行结果