内联块在 ng-recaptcha 中留下边界

Question

<div class="text-center">
          <re-captcha
           [ngClass]="{'face err-captcha': captchaResponse==false && submitted}"
          class="recaptcha" (resolved)="resolved($event)" siteKey={{captchaSiteKey}}>
          </re-captcha>
     </div>

Image

If I dont use inline block then that captcha block doesn't get centered. When I remove it then border goes away but the captcha gets out of order.

 .recaptcha {
  display: inline-block;
  background: #f9f9f9;
}

With black background, Image it actually not a border but looks like one. If there is a way to center it without using inline block that might do the trick.

.recaptcha {
  display: inline-block;
  background: #080808;
}

Answer 1

This is normal behavior for display: inline-block; So there are some solutions to this: 1. margin-right(or any side where this space or border coming): -1px;
2. font-size: 0; to the parent and give deired font size in inner items

3. <div class="text-center"><re-captcha [ngClass]="{'face err-captcha': captchaResponse==false && submitted}" class="recaptcha" (resolved)="resolved($event)" siteKey={{captchaSiteKey}}></re-captcha</div>

3rd one is may be looks wired to you but this is also a cool solution. remove all the space and enters from your code, basically minimize it.