Im trying to change the margin top of button that is located inside a div.

In know that it is impossible cause button by default is inline element, so i changed the button display to inline-block.. BUT i still couldnt change the button margin-top. Only when i deleted the the arttibute "transform: translatey(-50%)" of the parent, i could change the margin-top of the button! Why is that? and my second question, when i insert -50 to the button margin-top it distorted the button, again, why?

.carousel-actions {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width:100%;
    top: 50%;
    transform: translatey(-50%);  
}

button {
    margin: 40px 20px;
    padding: 10px 15px;
    border-radius: 50%;
    font-weight: 900;
    display: inline-block;   
}