views:

25

answers:

3

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<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-color :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>
+2  A: 

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.

David Dorward
A: 

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>
helle
… because float is even more complicated than inline-block
David Dorward
A: 

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.

billyswong
I have read that they can if they are inline-block
Petras
The div with the height set is also set to display: inline, not inline-block. It is irrelevant to the problem at hand though.
David Dorward
Just edited the post.Your `div` is inline, not inline-block.
billyswong