How I mine for padding?

[jewelfox]

I'm styling the pink Skittlish Dreams some more, and I decided I wanted to move the NSFW and friends-locked tags to the left of the date and time below each entry's title, as opposed to taking up a whole line between them. (You can see an example on this post, which is mildly NSFW and hence has the icon.)

Applying float: left; to .restrictions and .access-filter > img put it on the same line, but it isn't aligned with the date and time part. And I've been trying to use padding to get it to look right, but a) I feel like there should be a more elegant way to make it inline, and b) the padding won't apply no matter what. Not even adding !important does the trick.

What am I missing here, and is the better solution to just create a custom S2 layer and rearrange the placement of elements? If so, how would I go about that (and I get the feeling I'd need to do more CSS styling anyways)?

Comments

[ninetydegrees]

Using this instead:

.datetime {
display: inline-block;
margin: 0;
}

.restrictions img {
vertical-align: text-bottom;
}

works for me but not sure this works with any font size.

[jewelfox]

Oh hey, thanks. >.>;

I had better results with vertical-align: center; but that gave me a good start. Why did .datetime need to be tweaked, though?