Forums

mattobr

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

Nosenation

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

mattobr

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

treehouse : what would you like to learn today?

Forums

a href without text content ignores increases p height