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
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
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; }
I have a fix which is not ideal but I’ve changed .smallbutton { display:inline-block; } to .smallbutton { display:block; float:left; }