Question

我设法通过font-size属性左右两侧获得了差距，但我似乎无法在中间消失？请帮忙！我被困在这个

我尝试了边距和填充，它什么也没做 - 我不知道它的目标是什么！

     .container{
        font-size: 0;
        height: 100px;
        width: 135px;
     }
     a{
        position: relative;
            display: inline-block;
        height: 50px;
        width: 45px;
        vertical-align: top;
    }
    a img{
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0.2s;
        height: auto;
        width: 100%;
        opacity:1;
     }
    a .main-img{
        opacity: 1;
    }
    a .hover-img{
        opacity:0;
     }
    a:hover .main-img{
        opacity: 0;
    }
    a:hover .hover-img{
        opacity: 1;
    }![enter image description here](https://i.stack.imgur.com/5MyN7.jpg)

Answer 1

当您使用绝对定位设置元素（<img />）的内容（<a>）时，该父元素（<a>）将不知道其子元素的维度（{{1这就是你需要手动设置<img />的宽度和高度的原因。因此，在这种情况下的差距是因为图像不符合<a>与<a>和width=45px

的设置比例

有很多方法可以解决这个问题：

如果你真的希望按照你的方式（不推荐）保持它，你需要设置height=50px的{{1}}和width相同的比例作为你的图像（所有图像都需要具有相同的比例）。例如，如果图像是完美的正方形，请height <a>与width相同：https://jsfiddle.net/qr0zujf7/1/
另一种方法是设置height绝对而非<a>，以便.img-hover设置.main-img的尺寸，这样你就不会如果图片的比例不同（.main-img和<a>除外），则需要担心<a>的尺寸：https://jsfiddle.net/a6ymj4yc/2/

顺便说一下，你不需要这个.main-img

如何消除两行图像之间的差距？

1 个答案: