Why Does Using top or bottom Reduce the Element's Height?

Question

I'm trying to position an icon responsively which is part of a plugin in WordPress.

Using margin-top and margin-bottom works to position the icon further down the page, but top and bottom above 10px seems to reduce the height of the icon when used in conjunction with position: relative;

@media(max-width: 768px) {
    #a2a_share_save_widget-3 {
        position: relative !important;
        top: 20px !important;
        left: 95%;
        margin-left: -37px;
        background-color: transparent! important;
        color: transparent! important;
    }
}

If I reduce top to 10px , the icon goes back to full height again.

Html:

<div id="a2a_share_save_widget- 3" class="widget widget_a2a_share_save_widget">
    <div class="a2a_kit a2a_kit_size_32 addtoany_list">
        <a class="a2a_dd a2a_counter addtoany_share_save addtoany_share" href="https://www.addtoany.com/share"></a>.
    </div>
</div>

What I want is to apply top or bottom to adjust position, not icon height.

Mobile page here

Answer 1

The issue is not with regards to the share widget's height being reduced. The issue is that overflow: hidden is given to its ancestor section - the share widget is technically overflowing and parts of it are hidden.

So to solve this, either remove/override the property overflow: hidden from section

#content section {
    overflow: visible;
}

or have the widget's container take X amount of minimum height

div#main {
    min-height: 80px;
}

I imagine you want to increase specificity as these examples are generic terms and you are using a wordpress theme