Question

I’ve been helping a friend change the layout of his site (mostly css changes) at the moment I’m just fine tuning it a bit and have run into a problem. To begin with, here is a sample of the site. The problem is the titles for the posts, i want there to be less padding on the top and the bottom so that the background isn’t taller than the text when you hover on them. I’ve tried changing margins, and padding, pretty much tried everything. Increasing the padding works fine but i can’t seem to get it less than it is at the moment. I know it should work because it’s modelled after the titles in another site. Can anybody see where the problem lies? Thanks

Answer 1

If I’m understanding correctly, you want to change the amount of empty space around the main post title. If so, adjust line-height:

#content .post .title h3 a {
    text-align: left;
    -webkit-transition: color 0.25s linear;
    font-size: 36px;
    letter-spacing: -1px;
    font-weight: 750;
    line-height: 50px; /* Change this */
    color: #444444;
    text-decoration: none;
    padding:0px 0px;
}

Example with line-height (overly) reduced: http://jsfiddle.net/AH9VP/3/

See also: http://www.w3.org/wiki/CSS/Properties/line-height

However…Note that in spite of changing line-height (which definitely reduces spacing), there seems be a limit on how much the browser will constrain the box when you hover on the text. This is (I think) because the browser is allowing space for glyphs at the top/bottom (like the tail of the “y” in “usually”).

This topic is somewhat related: https://stackoverflow.com/a/11857786/453277

I know it should work because it’s modelled after the titles in
another site.

It would be helpful to see the other site, in case I’ve missed something.