Q:

How to use an image as input group addon and have no padding/margin around it?

Hi I am trying to put captcha image as an input group item in a Bootstrap 4 form. it's working but it shows an border around the image and making the input field larger than the other ones and i don't want that to happen, here is the code and i am attaching a picture too.
thanks in advance.
<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>

A:

Add the classes p-0 and m-0 to your captcha image.
Like so:

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

Those are native Bootstrap 4 classes for removing padding and margin. No css hacks needed.

