Question

go to this example page. as you can see, the link, the words ‘Call’ and ‘Email’ are all aligned lower than the rest of the text. this is also happening when i wrap markup in , or suchlike tags.

i’ve got a reset going on, so… what the hell is causing this? this shows up in ALL browsers, so it’s not a Chrome issue or Safari issue, or whatever-browser issue.

WR!

Answer 1

It’s because theres a padding of 4px on those elements, check your rules

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 4px;
    vertical-align: middle;
    border-image: initial;
}

that includes span which you are using on the words Call and Email