css - 链接图片下方的多出的边(横线)如何消除?
PHPz
PHPz 2017-04-17 13:03:46
0
9
654
PHPz
PHPz

学习是最好的投资!

全員に返信(9)
伊谢尔伦

img{display: block;}

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

いいねを押す +0
大家讲道理

img 属于行内元素,具有:

    display: inline;

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

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

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

header > a {
    line-height: 0;
}
いいねを押す +0
洪涛

不是border:none?

いいねを押す +0
洪涛

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

いいねを押す +0
巴扎黑

设置链接a的样式?

いいねを押す +0
刘奇
a {
    text-decoration: none;
}

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

いいねを押す +0
迷茫

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

いいねを押す +0
Peter_Zhu

加个CSS reset试试?

いいねを押す +0
Ty80

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート