img标签底部有空白

Question

I'm creating a wordpress page and creating a certain part with background image, The main issue was, one of the image in css is being cut or split here is the link to the site:

http://testpress.dramend.com/amend-2/ the image being split was loopmid.gif which was not connecting to looptop.gif here is the screenshot:

<tr>
   <td height="23"><img width="707" height="23" alt="" src="http://dramend.com/looptop.gif"></td>
</tr>

Have I done anything wrong in my CSS?

Thanks

Answer 1

You need to use display: block; or you can use vertical-align: bottom; as well for the img tag since it is inline element by default...that will solve the issue.

Also, you are using table for designing layouts which is just dirty.. Learn CSS Positioning, floats, and make layouts using other tags like div , section etc

Answer 2

与其使用表格进行设计，不如尝试使用div和CSS定位

Answer 3

Since you are using table for designing layout, which is not suggested as Mr.Alien said, you may use display:table; for that img tag as well.

Answer 4

In your css file please add following lines:

table, td, tr {
   margin:0; 
   padding:0;
}