Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS a href without text content ignores increases p height

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #40796
    onebitrocket
    Participant

    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

    #114305
    Nosenation
    Member

    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;
    }

    #114315
    onebitrocket
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.