Tumblr footers - Making them balanced? - html

Question

I am currently working on my tumblr theme footer size. I changed the paddings of the ".post .footer" so that it would be smaller and came up with:
#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;
}
So then I tested it and am satisfied with the size. But then i noticed that the second footer (footer for the post tags)'s size is slightly bigger than the first footer (the footer for the time or date and notes).
So then i decided to edit it and add a separate section for the "tags" footer. I placed this in between ".post .footer .notes a,.post .footer .date a" and " .post .footer .tags a":
#wrapper #content .post .footer .tags {
padding:0px 0px;
}
I put in 0px paddings so that the size would be smaller as there are no paddings. But it still did not work so i changed the paddings to:
#wrapper #content .post .footer .tags {
padding:-1px -1px;
}
Then i tested it, but it still did not work. What's going on? The second footer's size is still bigger and the footers are still imbalanced. Am I missing something here?

Answer 1

Okay, tag is an inline element by default, so you need to add display:block; to it so that it can adapt to your custom width and height.
#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
}