Question

我正在网站上工作，我已经制作了一个可点击的图像，它将用户带到同一图像但是全分辨率，现在的问题是它生成的空文本占用了一条线并且非常烦人。

那么有没有办法用html和css来解决这个问题？

提前致谢。

This is the image for the problem with the intruder line highlighted, it is the tag with 4px * 20px size.

并且代码如下简化为当然的相关位;

<head>
<style>
.innerBox{
    padding-left:5px;
    padding-right:5px;
    padding-top:0px;    
    padding-bottom:5px; 
    margin-bottom: 10px;
    margin-top: 10px;
    overflow: hidden;
}
.innerBox img{
    width: 320px;
    height: 180px;
    float:left;
    display:block;
    padding-left:0px;
    padding-right:10px;
    padding-top:0px;    
    padding-bottom:0px; 
    margin:0px;
}
.innerBox a{
    display:inline;
    font-family: Noto Sans;
    color: rgb(230,230,230);
    border-bottom: solid rgba(0,0,0,0) 3px;
    text-decoration: underline;
    padding-left:2px;
    padding-right:2px;
    padding-top:0px;    
    padding-bottom:0px; 
}</style>
</head>
<div class=innerBox>
<a href="images/xx.png" target="_blank"><img src="images/xx.png"></img></a>
<p>All the text goes here</p>
<p>and also here</p>
<p>as well as here</p>
</div>

Answer 1

see working fiddle。我已将<a>元素从display:inline更改为display:block。另请注意，您不需要<img>的结束标记。

删除标记生成的文本

1 个答案: