图像样式
来自CloudWiki
设置图片的边框和边距
- border：设置图像的边框；
- border-radius:设置圆角图像；
- margin：设置图像在四个方向的外边距，图像元素虽然是行内元素，但是因为效果为块状，所以可以为其设置margin属性；
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Head Line</title>
<style type="text/css">
img{padding:5px; margin:10px 10px 10px 0;border:1px gray dashed; }
</style>
</head>
<body>
<img src="/i/eg_tulip.jpg"/>
</body>
</html>
例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title></title>
<style type="text/css">
.box{width: 200px; height: 200px; }
.box img{width:100%; overflow:hidden; border-radius: 50%; border: 1px solid;}
</style>
</head>
<body>
<div class="box"><img src="img/h5.jpg" ></div>
</body>
</html>
图片和文字的对齐
- vertical-align：设置同一行中图像与文字的垂直对齐方式，样式属性常用的取值为：
top：图像顶端与第一行文字行内框顶端对齐
middle：图像垂直方向中间线与第一行文字对齐
bottom：图像底线与第一行文字行内框底端对齐
- 源代码：
<html>
<head>
<style type="text/css">
#b1 {vertical-align:top}
#b2 {vertical-align:middle}
#b3 {vertical-align:bottom}
</style>
</head>
<body>
<p>
这是一幅<img id="b1" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
<p>
这是一幅<img id="b2" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
<p>
这是一幅<img id="b3" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
</body>
</html>
