Margins/paddings in a li element

How to fix this strange effect of margins/paddings开发者_Python百科? (jsfiddle): i.imgur.com/64S8C.jpg I do not need any margins/paddings in the li element.

Try using the float property:

li img {
    float: left;
}

or vertical-align:

li img {
    vertical-align:middle;
}

The extra space around the text and image isn't created because of margins or paddings, but because of how the image is vertically aligned in relation to the text.

By setting vertical-align: middle to the image you'll get quite close to what you want. To make it perfect, adjust the image position with a negative top margin until it sits just where you want it. The following (jsfiddle) works well for me:

li img {
    vertical-align: middle;
    margin-top: -3px;
}