Is there a CSS property which, when you set an object's position to relative and move it and resize it, it doesn't change its containers size?

Question

So, I have a footer bar, it's got buttons in it. I'm trying to adjust the position of one of the buttons in order to give it more space. I want to move it up 10px and increase its height but when i do that it acts as if its in its original position and moves all the other buttons up, how do i make it so that it doesn't do that?

/*There's little space between it and the windows navigation bar*/
#syncButton {
    width: 100px;
    height: 18px;
}

/*There's lots of space between it and the windows navigation bar*/
#syncButton {
    position: relative;
    bottom: 20px;
    width: 100px;
    height: 38px;
}

user_19208136 · Answer

The simple way is to use display: inline-flex and set the align-items property to center and the justify-content property to center.

body {
    margin: 2rem;
}

#syncButton {
    position: relative;
    bottom: 20px;
    width: 100px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

Is there a CSS property which, when you set an object's position to relative and move it and resize it, it doesn't change its containers size?

1 Answers