CSS设置图片与文字的间距

2012-11-24 来源：网络

【实例介绍】

CSS设置图片与文字的间距

希望图片本身与文字有一定的距离只需要给<img>标记添加margin属性即可。margin属性包括margin．top、margin-right，margin-bottom、margin—left、margin。属性margin可以用来同时设置图片的四边外边距，而其他的margin属性只能设置其自各的外边距。

【基本语法】

margin：auto | length

【语法介绍】

auto：值被设置为相对边的值。
length：由浮点数字和单位标识符组成的长度值或百分数。百分数是基于父对象的高度。对于内联对象来说，左右外延边距可以是负数值。

【实例代码】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
div {
width:300px;
border:1px solid green}
img {
float:left;
width:120px;
height:120px} 
img{margin-left: 10px;}
img{margin-right: 10px;}
</style>
<body>
<div>
<img src="风景3.jpg" width="189" height="172" />景物是风景构成的客观因素、
基本素材，是具有独立欣赏价值的风景素材的个体，包括山、水、植物、动物、空气、
光、建筑以及其他诸如雕塑碑刻、胜迹遗址等有效的风景素材。景感是风景构成的活跃
因素、主观反映，是人对景物的体察、鉴别和感受能力。例如视觉、听觉、嗅觉、味觉、
触觉、联想、心理等。条件是风景构成的制约因素、缘因手段，是赏景主体与风景客体所
构成的特殊关系。包括了个人、时间、地点、文化、科技、经济和社会各种条件等。</div>
</body>
</html>

【代码分析】

在代码中，加粗部分的代码标签是设置图片与文字的左间距和右间距都为l0px，效果如图所示。

设置图片与文字的间距运行效果