Navigation design


#1

https://www.codecademy.com/courses/learn-navigation-design/lessons/learn-links-and-buttons/exercises/skeuomorphic-styling?action=resume_content_item

.answer:active {
margin-top: 24px;
margin-bottom: 16px;
}

Why when I just set margin-top: 24px, all the buttons with answer class will move down by 24px? But when I add one more style margin-bottom: 16px, only the target element will appear to move downwards?
Thanks for your help in advance.