CSS 3之图文混排效果

用属性能设计图片和文字之间的距离，即文字与图片之间在一定间距；属性主要用来在一个声明中设置所有内边距属性，即能设置元素所有内边距的宽度，或设置各边上内边距的宽度；注意：不允许指定负边距值；语法格式如下所示：参数说明：例子 1：使用属性能实现文字环绕效果；属性主要定义元素在哪个方向浮动；一般应用于图像，使文本环绕在图像周围，也能定义其他元素浮动；浮动元素会生成一个块级框，不论它本身是何种元素；若浮

菇毒

4898人浏览 · 2022-06-18 12:09:03

菇毒 · 2022-06-18 12:09:03 发布

图文混排效果

1. 设置图片与文字间距
2. 文字环绕效果

1. 设置图片与文字间距

用 padding 属性能设计图片和文字之间的距离，即文字与图片之间在一定间距；
padding 属性主要用来在一个声明中设置所有内边距属性，即能设置元素所有内边距的宽度，或设置各边上内边距的宽度；
注意： 不允许指定负边距值；
语法格式如下所示：

padding:padding-top |padding-right |padding-bottom |padding-left

参数说明：

padding-top：设置距离顶部内边距；
padding-right ：设置距离右边内边距；
padding-bottom ：设置距离底部内边距；
padding-left ：设置距离左部内边距；

例子 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字环绕</title>
		<style>
			img{max-width: 250px;
			float: left;
			padding-top:15px ;
			padding-right: 55px;
			padding-bottom: 15px;
			}
		</style>
	</head>
	<body>
		<p>花开再美，怎如初见？
		<img src="3.jpg"/>
			人生若只如初见，何事秋风悲画扇。
			等闲变却故人心，却道故人心易变。
			骊山语罢清宵半，泪雨霖铃终不怨。
			何如薄幸锦衣郎，比翼连枝当日愿。
		</p>
	</body>
</html>

20220506

2. 文字环绕效果

使用 float 属性能实现文字环绕效果；
float 属性主要定义元素在哪个方向浮动；
一般应用于图像，使文本环绕在图像周围，也能定义其他元素浮动；
浮动元素会生成一个块级框，不论它本身是何种元素；若浮动元素非替换元素，则要指定一个明确的值；否则，他们尽可能地窄；
语法格式如下所示：

float:none |left |right

例子 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字环绕</title>
		<style>
			img{
				max-width: 185px;
				float: left;
			}
		</style>
	</head>
	<body>
		<p>花开再美，怎如初见？
		<img src="3.jpg"/>
			人生若只如初见，何事秋风悲画扇。
			等闲变却故人心，却道故人心易变。
			骊山语罢清宵半，泪雨霖铃终不怨。
			何如薄幸锦衣郎，比翼连枝当日愿。
		</p>
	</body>
</html>