Grow your CSS skills. Land your dream job.

a href without text content ignores increases p height

  • # November 14, 2012 at 10:03 am

    Hi,

    First post here.

    I’m getting a weird display issue with some of my a href tags, where there is no text inside the tag. My height of my p tag is increased.

    Normally, if there is text in the a tag, the a tag obeys the line-height set in the css

    Here’s a codepen link.
    http://codepen.io/onebitrocket/pen/wtBfn

    Any thoughts?
    Thanks

    # November 14, 2012 at 10:28 am

    Problem is with padding on a tag and height of p tag. P tag height is = to a tag height + padding on bot and top.

    This should work (simplified version):

    CSS:
    p{
    background:#d5d5d5;
    height: 40px;
    }
    .smallbutton {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    text-decoration: none;
    background:#333;
    color:#fff;
    padding: 10px;
    }

    # November 14, 2012 at 11:57 am

    I have a fix which is not ideal but I’ve changed
    .smallbutton {
    display:inline-block;
    }
    to
    .smallbutton {
    display:block;
    float:left;
    }

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".