css - Padding under background image link next to text link - why?_问答_开发者

css - Padding under background image link next to text link - why?

开发者 https://www.devze.com 2023-01-06 16:11 出处：网络

This CSS problem is killing me :-( I cannot remove padding under a link in this page http://www.yart.com.au/stackoverflow/test2.htm

This CSS problem is killing me :-(

I cannot remove padding under a link in this page http://www.yart.com.au/stackoverflow/test2.htm

I have reduced the problem to the bare minimum so its really clear.

You can see my issue here http://www.yart.com.au/stackoverflow/blue.png alt text http://www.yart.com.au/stackoverflow/blue.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<style type="text/css">

*
{
  padding:0;
  margin:0;
  font:15px arial;
}

div
{
  display:inline;
  height:18px;
  line-height:18px;
  background-co开发者_运维技巧lor :blue;
}

.PageMove
{
  display:inline-block;
  background-image: url(http://www.yart.com.au/stackoverflow/page_move.gif);
  background-repeat:no-repeat;
  width:18px;
  height:18px;
  line-height:18px;
}


.Text
{
 background-color :red;
 display:inline;
 height:18px;
 line-height:18px;
}


</style>
</head>


<body>

<div><a href="#" class="PageMove"></a><a href="#" class="Text">18 pixels high</a></div>

</body>

</html>

Things which are display: inline-block are treated as as characters and sit on the baseline. There is space beneath for descenders (which you find on letters such as p, j, g and q).

Set vertical-align: bottom to position the element on the bottom instead of the baseline.

why not use float?

<div style="width: give-it-a-usefull-width">
    <a href="..." id="pageMove" style="float: left;">...</a>
    <a href="..." id="text" style="flaot: left;">...</a>
</div>

I don't know where your problem is exactly stemmed from but

inline elements cannot be specified a 'height'. So your height:18px; for the 'inlined' div will be ignored.

I ran into this issue on some email templates. IE and FF did not show the blue line but emails opened on mobile devices such as iphone and android did.

Emails opened in web email clients over chrome browsers also showed the blue line.

I solved the problem by placing the image in the middle of the cell. align="middle"

Set the cell to align="middle" as well.

(this places the blue line behind the image and solves the problem)

On irregular shaped images (that are png, or gif) you may want to consider saving the image with a background color or converting to a jpeg on white backgrounds. Again its not the type of image that solves this, just removing a clear background and creating a solid rectangle of square block of color to hide the line solves the issue.

Good luck!

Nate Boe