Tumblr 页脚 - 让它们保持平衡？

Question

我目前正在研究我的 tumblr 主题页脚大小。我更改了“.post .footer”的填充，使其更小，并提出：

#wrapper #content .post .footer {
background: {color:Footer} url({image:footer});
{block:IfFooterBorder}
border: {text:Footer Border}px solid {color:Footer Border};
{/block:IfFooterBorder}
font-family: {text:font family secondary};
font-size: 9px;
color: {color:Footer text};
padding:4px 8px;
margin-top:15px;margin-bottom:8px;
line-height:8px; z-index:10;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#wrapper #content .post .footer .date {
width: 67%;
float: left;
}

#wrapper #content .post .footer .notes {
width: 33%;
float: right;
text-align: right;
}

#wrapper #content .post .footer .notes a, #wrapper #content .post .footer .date a {
color: {color:Footer link};
text-decoration:none;
}


#wrapper #content .post .footer .tags a {
color: {color:Footer link};
{block:ifnotlinkunderline}
text-decoration: none;
{/block:ifnotlinkunderline}
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
font-size: 10px;
}

然后我对其进行了测试，并对尺寸感到满意。但后来我注意到第二个页脚（用于发布标签的页脚）的大小略大于第一个页脚（用于时间或日期和注释的页脚）。

然后我决定编辑它并为“标签”页脚添加一个单独的部分。我把它放在“.post .footer .notes a,.post .footer .date a”和“.post .footer .tags a”之间：

#wrapper #content .post .footer .tags {
padding:0px 0px;
}

我放入了 0px 填充，这样尺寸会更小，因为没有填充。但它仍然不起作用，所以我将填充更改为：

#wrapper #content .post .footer .tags {
padding:-1px -1px;
}

然后我测试了它，但它仍然没有工作。这是怎么回事？第二个页脚的大小仍然更大，页脚仍然不平衡。我在这里遗漏了什么吗？

Answer 1

好的，tag默认是一个内联元素，所以你需要给它加上display:block;，让它适应你自定义的宽高。

#wrapper #content .post .footer .tags a {
    color: #ffdaf4;
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    font-size: 10px;
    font-style: italic;
    cursor: help;
    display: block; //add this line to change the height
    line-height: 8px; // add this line to vertical center your text for better looking
}