Question

我正在制作一个电子邮件签名/联系表单，其中的图片会链接到相应的信息，如电子邮件，电话号码等。

在每个

元素之后，底部有一些额外的空间，我不想要。这个额外的空间存在于嵌套的

和标签中，但不存在于标签中（这些标签适当地包装）。我不完全确定导致这种情况的原因。

相关代码：

HTML：

<body>
<div class="signature">
    <div class="content">
        <p class="name"><a href="#"><img src="/img.png"></a></p>
        <p class="address"><a href="https://www.google.com/maps/dir/..." target="_blank">
        <img src="/img2">
        </a></p>
        <p class="phone"><a href="tel:+5551234567"></a><a href="tel:+5551234567"><img src="/img3.png"></a></p>
        <p class="website"><a href="#" target="_blank"><img src="img4.png"></a></p>
    </div>
</div>
</body>

CSS：

.content {display:inline-block; vertical-align:middle; padding:25px; border-left:1px solid #f26822;}
.content p {margin:0; font-family:Bliss2 Light; color:#81807f; font-size:16px;}
.content p a {color:#81807f; text-decoration:none;}
.content p a img {display:inline-block;} 
.content p.name a {font-family:Bliss2 Medium; color:#f26822; font-size:24px; text-transform:uppercase;}
.content p.title {font-family:Bliss2 Medium; color:#818181; font-size:22px; margin-bottom:15px;}

Answer 1

将以下代码添加到您的代码

.content p a{display:block; line-height:0}

此代码将删除图像之间的空白区域。

如何将最外层html元素的大小调整到最里面的元素？

1 个答案: