链接图片下方的多出的边（横线）如何消除？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task1-section2</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <a href="#"><img src="images/ms.png" alt="MicroSoft"></a>
    </header>
    <!-- 主体内容 -->

    <!-- 底部版权 -->
    <footer>
        <p>版权所有®</p>
    </footer>
</body>
</html>
---------------------------------------------------------------
      *{
    padding: 0;
    margin: 0;
    background-color: #ccc;
}
/*头部导航*/
header{
    background-color: #fff;
}
header a{
    text-decoration: none;
    height: 0px;
    background-color: #fff;/*添加后可消除*/

}

问题依旧有效，目前我只能设置a连接的背景颜色和header颜色相同才能解决。
无法消除，实际还是存在，只是用颜色覆盖而已。
希望能有人能用别的方法来解决，虚心接受。
-----------------------3/24-------
刚才在做其他页面，找资料时刚好碰到原因了
图片默认的vertical-align是baseline，
可以设置vertical-align:middle，我则是直接设置img{display:block;}

感谢各位。
贴个链接：http://jingyan.baidu.com/article/7082dc1c69dc6fe40a89bdfe.html

不是border:none？

其实我想问下为什么要在*{padding:0; margin:0; background-color: #ccc;}这里的background-color设置的话，其他任何标签都会受到影响吧。

一般直接显示图片不会出现下划线。导致出现下划线是因为你在图片外套了a标签导致的，你可以在css中写
a{
text-decoration:none;
}
来消除a标签的下划线

设置链接a的样式？

img{display: block;}

正如前面的朋友所说，img是inline元素，把img转换为block块元素就可以了

我擦，难道不是text-decoration:none;?

img 属于行内元素，具有：

    display: inline;

与文本相似，基线并不是在容器底部，设置下display或者font-size属性可以消除

header > a > img {
    display: inline-block;
    font-size： 0;
}

改变其父元素 a 的行高line-height也可

header > a {
    line-height: 0;
}

a {
    text-decoration: none;
}

http://www.w3schools.com/css/css_link.asp
http://www.w3schools.com/css/tryit.asp?filename=trycss_link_decoration

加个CSS reset试试？

【热门文章】