Html 使用浮动填充顶部没有结果：右

我有这个：

HTML:

<div class="menu">
    <div class="logo">
        <img src="http://placehold.it/200x50"/>
    </div>
    <div class="add">
        <a href="#" class="link">Lorem ipsum</a>
    </div>
</div>

.menu {
    width: 80%;
    margin: 0px auto;
}
.menu .logo {
    float: left;
}
.menu .add {
    float: right;
}
.menu .add .link {
    color: white;
    background: red;
    padding-top: 20px;
}

但是

填充顶部

不起作用，我不知道为什么。我试过使用

margintop:20px，结果相同

这里是JSFIDLE:
链接需要设置为块级，并带有：
display:block


尝试在css中删除
.link
类，如下所示：

.menu .add{
    color: white;
    background: red;
    padding-top: 20px;
}

它适用于我：
默认情况下，不能将padding top添加到
a
标记中，需要将其设置为
内联块
元素

.menu .add .link {
    display:inline-block;
    color: white;
    background: red;
    padding-top: 20px;
}

@克拉塔林詹有时候你只需要第二双眼睛来看待一个问题。。。
.menu .add .link {
    display:inline-block;
    color: white;
    background: red;
    padding-top: 20px;
}