开发者社区> 问答> 正文

问 链接图片下方的多出的边(横线)如何消除?

杨冬芳 2016-06-08 18:16:33 815
<!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;/*添加后可消除*/

}

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

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

分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:32:32
    img{display: block;}

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

    0 0
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章