HTML: An inexplicable vertical gap between text elements with an image?

Question

Why is there a space here (ie "element3" LOWER than "element4")?

+----------------+ +----------------+ |+------++------+| VS. |+------++------+| || 1 || 2 || || 1 || 2 || || || || || || || gap |+------++------+| |+------++------+| ----> | +------+| ----> |+------++------+| why?? |+------+|+--+ 4|| no gap || ||++ 4|| || 3 |||Im| || || 3 ||++ || || ||+--+ || || || || || |+------+| |+------++------+| |+------+ | | | +----------------+ +----------------+ 

Here is the code

 <?php echo " <style type=text/css> a.keys{ display:inline-block; width:100px;height:100px; border:1px solid #000; } </style> <div class=panel style='width:250px;height:100%;border:1px solid #000;'> <a class=keys href='#'>1</a> <a class=keys href='#'>2</a> <a class=keys href='#'>3</a> <a class=keys > <img src=img/apple.jpg style='width:50px;height:50px;' > </a> </div> "; ?> 

those. why is element 3 marked with text smaller than element 4? This has something to do with the image (and size), but I cannot understand why the SMALLER image, than the parent element, will lead to this behavior?

Any help would be appreciated ...

Answer 1

You need vertical-align:top specified in .keys .

Answer 2

" vertical-align: top " only in the image:

 <div class=panel style='width:250px;height:100%;border:1px solid #000;'> <a class=keys href='#'>1</a> <a class=keys href='#'>2</a> <a class=keys href='#'>3</a> <a class=keys > <img src=img/apple.jpg style='width:50px;height:50px;**vertical-align:top**' > </a> </div> 

See - http://jsbin.com/opejo4/2

changing " height: 100px " to " line-height: 100px " in a.keys also does the trick.

 <style type=text/css> a.keys{ display:inline-block; width:100px; line-height:100px; border:1px solid #000; } </style> <div class=panel style='width:250px;height:100%;border:1px solid #000;'> <a class=keys href='#'>1</a> <a class=keys href='#'>2</a> <a class=keys href='#'>3</a> <a class=keys > <img src=img/apple.jpg style='width:50px;height:50px;' > </a> </div> 

See - http://jsbin.com/opejo4/4

Answer 3

It looks like it could be your html tag.

Try editing the HTML as follows:

 <div class="panel" style="width:250px;height:100%;border:1px solid #000;"> <a class="keys" href="#">1</a> <a class="keys" href="#">2</a> <a class="keys" href="#">3</a> <a class="keys" href="#"> <img src="img/apple.jpg" style="width:50px;height:50px;" /> </a> </div> 

Also, assign vertical-align:top your css as suggested by meder :

 a.keys{ display:inline-block; width:100px;height:100px; border:1px solid #000; vertical-align:top }