.first { margin-bottom: 30px; }
.second { margin-top: 20px; }
30px
30px is right. When the vertical margins of two block boxes touch in normal flow, they collapse. They merge into one margin equal to the larger value. Normal flow is the default layout, with no flex, grid, floats or positioning.
50px is the tempting wrong answer, because it adds the two margins. That only happens between flex or grid items, where margins never collapse.