Twenty Twelve header whitespace under image solution

  • Resolved andymacleod

    (@andymacleod)


    11 years, 2 months ago

    I’m making a custom theme using Twenty Twelve header functionality. I had a whitespace problem which I solved – so I thought I’d pass on the information in case it can help someone else…

    I included Twenty Twelve’s custom-header.php file into functions.php and copied and pasted the header code into header.php (except the nav which I deleted – I’ve placed that elsewhere).

    It worked – but with a couple of pixels whitespace under the header image (when viewed with Firefox 18, Chrome 24 and IE 10).

    I used Firebug to identify that the whitespace was in the header > a element… which was also appearing at the bottom of the header div.

    I tried removing the margins and padding on that a element first, but it didn’t work. However, I DID manage to solve this by adding the following TWO rules:

    header#main-header > a {
	display:block;
	line-height:0;
}

    I don’t quite understand what’s going-on here, but it works!

Viewing 1 replies (of 1 total)
  • Beauty Mouse

    (@trueblue0001)

    11 years, 2 months ago

    Seems like your markup is like this:

    <div><a><img></a></div>

    In that case img will not align with the bottom of the div; it aligns with the baseline; below the baseline is a 2-3 pixels gap which you are referring to (actual number depends on font, font size and line height). This is explained with screenshots here:

    How to Remove the Space Below Images and Other Inline-Block Elements

    The correct solution is to add the following css rule to the img tag:

    #selector img {
  vertical-align: bottom;
}

    Your current trick should also work but it will have side effects (e.g. a stretches all the way across the header). Changing the img to block would be better.

Viewing 1 replies (of 1 total)
  • The topic ‘Twenty Twelve header whitespace under image solution’ is closed to new replies.