gpt4 book ai didi

html - 如何使最外层 html 元素的大小适合最内层元素?

转载 作者:行者123 更新时间:2023-11-28 05:52:23 26 4
gpt4 key购买 nike

我正在构建一个电子邮件签名/联系表,其中包含将链接到相应信息(如电子邮件、电话号码等)的图像。

在每个

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

和标签中,但不存在于标签中(这些标签适本地换行)。我不完全确定是什么原因造成的。

相关代码:

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;}

最佳答案

将以下代码添加到您的标签中

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

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

关于html - 如何使最外层 html 元素的大小适合最内层元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37255558/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com