The phantom whitespace

<button onClick={onDropdownClick} className="menu-trigger">
    <img
        className="google-profile-photo"
        src={currentUser.photoURL}
        alt="User Avatar"
    />
    <span>
        <ArrowDown />
    </span>
</button>

I want the img tag and the span to be next to each other with no space in between. I cannot get rid of this whitespace in the middle. Does anyone know how?

.menu-trigger {
    display: flex;
    width:auto;
    min-height: 5rem;
    position: relative;
    background: white;
    border-radius: 0.3rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    box-shadow: 8px 16px 5rem #eeeeee;
    vertical-align: middle;
    transition: box-shadow 0.4s ease;
    margin-top: 1rem;
    border: none;
}

.google-profile-photo {
    border-radius: 50%;
    margin: 2%;
    width: 50%;
    height: 100%;
}

CodePudding user response：

use this:

justify-content: center;

and this for your second question :

background-size: cover

CodePudding user response：

You'll need to give the image element flex: 1 so it can fill up that space. Here's a somewhat minimized example...

.menu-trigger {
    display: flex;
    min-height: 3rem;
    position: relative;
    background: white;
    cursor: pointer;
    align-items: center;
    padding: 4px 6px;
    border: 1px solid black;
    width: auto;
}

.google-profile-photo {
    margin: 2%;
    border-radius: 50%;
    flex: 1;
    height: 100%;
}

<button class="menu-trigger">
    <img
        class="google-profile-photo"
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAADFBMVEXU3ej///8AAAATExOMrozEAAAAdElEQVR4XpXPsQ2DMBRF0StX4D1c4IYRmAJkeQKPwRL0NJGQp6OK0hG9L5wqRXKbf6RXfX4qrvhDCDtDXoVCWBAS4SlML8KlaTyJDa4K/9QZHPhqQT r5Rt8g/tgu8FDyMAgJMBrK9zbLsRttneg5gMLu603mI0q2s7nekMAAAAASUVORK5CYII="
        alt="User Avatar"
    />
    <span>
        &darr;
    </span>
</button>