标签之间的奇怪空间

Question

我正在使用HTML / CSS / JS制作下拉菜单。输入五个标签并添加“margin-top：20px”它应该从顶部制作20px空间，但它会产生更大和更小的空间 - 从顶部24px，从顶部28px，从顶部28px ... 我在代码中找不到问题。我正在删除其他课程的边距和填充。任何改变都不成功。

HTML：

    <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn"><div class="cog"></div></button>
        <div id="myDropdown" class="dropdown-content">
            <div class="dop"></div>
            <a href="#">Text</a>
            <a href="#">Text</a>
            <a href="#">Text</a>
            <a href="#">Text</a>
            <a href="#">Text</a>
        </div>
    </div>

<script src="js/js-1_dropdown.js"></script>

CSS：

.dropbtn {
    height: 34px;
    width: 34px;
    background: #f0f0f0;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
}

.dropbtn:hover, .dropbtn:focus {
    background: #ebebeb;   
}

.dropdown {
    position: relative;
    display: inline-block;
    margin-top: 100px;
    margin-left: 100px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    width: 140px;
    border-radius: 3px;
    left: -53px;
    top: 48px;
}

.dropdown-content a {
    color: #b7b7b7;
    text-decoration: none;
    display: block;
    font-family: OpenSans-Regular;
    font-size: 12px; 
    text-align: center;
    padding-top: 20px;
    position: relative;
    margin: 0;
}

.dropdown-content a:hover {
    color: #adadad;
}

.show {display:block;}

.cog {
    height: 16px;
    width: 16px;
    position: absolute;
    top: 9px;
    left: 9px;
    background: url(img/i-3_settings.png);   
}

.dop {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 4px solid #ffffff;
    position: absolute;
    top: -4px;
    left: 65px;
}

* {
    outline: none;
}

直播 - https://jsfiddle.net/qc8aempj/

Ričards。