css样式bottom问题

html-css017

css样式bottom问题,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

<!--

img{border:1px #ccc solid}

a{color:red}

a:hover img{position:relativebottom:10px}

-->

</style>

<body>

<a href="#">文字</a>

<a href="#">文字</a>

<a href="#">文字</a>

<br /><br /><br />

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<br /><br /><br />

<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>

<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>

<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>

</body>

</html>

只改这个hover就可以啊..10px也太大了点.

a:hover img{position:relativetop:1pxleft:1px}

Margin和padding的top与bottom的正负指的是元素的位置相对于其所在容器的上下距离，如果为正，表示从容器的上边或下边（分别是top与bottom）向外偏移，向下则是改变元素的位置下移，即使用负值。

如果top与bottom为负值，表示元素会被压到容器内部，减小元素和容器周围的距离。