如何使用图像作为输入组插件并且周围没有填充/边距？

Question

您好我正在尝试将验证码图像作为Bootstrap 4表单中的输入组项目。它工作，但它显示图像周围的边框，使输入字段比其他的大，我不希望这发生，这是代码，我也附加了一张图片。 提前谢谢。

<fieldset class="form-group">
    Captcha
    <div class="input-group">
    <img class="input-group-addon img-fluid" src="<?php LinkGen::getLink("captcha.php"); ?>" style="margin:0;">
    <input type="text" class="form-control" id="AntiSpamImage" name="AntiSpamImage" autocomplete="off" required />
    </div>
</fieldset>

Answer 1

将类p-0和m-0添加到验证码图片中。

像这样：

＆＃13;

＆＃13;

<fieldset class="form-group">
    Captcha
    <div class="input-group">
    <img class="input-group-addon img-fluid p-0 m-0" src="<?php LinkGen::getLink("captcha.php"); ?>">
    <input type="text" class="form-control" id="AntiSpamImage" name="AntiSpamImage" autocomplete="off" required />
    </div>
</fieldset>

＆＃13;

＆＃13;

＆＃13;

这些是用于删除填充和边距的本机Bootstrap 4类。不需要css hacks。