Image and span aligning with margin

Question

I've been trying to align an image and a span side to side but whenever I add a margin value to the span it does not do anything. I have tried adding margin values to the image but when I do so, the span moves along with it instead of staying fixed in the position. I can't seem to get my head around what's happening or a solution to this.

Here's the CSS code for the image and span:

 .google_logo {
    margin-right: 10px;
    margin-top: 5px;
  }

  .google span {
    text-align: center;
    display: fixed;
    margin-bottom: 40px;
    color: black;
    font-weight: 550;
  }

This is the related HTML code:

<div class="google">
                <i class="fa-brands"><img class="google_logo" src="(image link is here)"/><span>Continue with Google</span></i>
                </div>

• And yes I cut out the image link since it was too long but it is there on the original code

Answer 1

"whenever I add a margin value to the span it does not do anything" -> That's because 1.) span tags are inline by default, where margins won't apply and 2.) you applied position: fixed to the span which fixes it at a certain position of the viewport, not in the document flow (which can also lead to overlaps).

Assign display: inline-block to the span and applied margins will be effective.