Ответ 1
Напишите vertical-align:top;
. Напишите вот так:
img {
display:inline-block;
margin:0;
vertical-align:top;
}
Отметьте http://jsfiddle.net/dJVxb/4/
Как мне избавиться от пространства между нижней частью изображения и оберткой, сохраняя изображение как встроенный блок? Почему это происходит?
HTML:
<div id="wrapper">
<img src="https://twimg0-a.akamaihd.net/profile_images/1735360254/icon_reasonably_small.jpg" >
</div>
CSS:
#wrapper {
background:green;
}
img {
display:inline-block;
margin:0;
}
Напишите vertical-align:top;
. Напишите вот так:
img {
display:inline-block;
margin:0;
vertical-align:top;
}
Отметьте http://jsfiddle.net/dJVxb/4/
Это добавленное пространство, чтобы освободить место для descenders, был встроенный текст. Descenders - это части букв, которые достигают вниз, как в "y" и "g".
Если вам нужно сохранить свойство vertical-align
center
или baseline
, вы можете исправить это, установив line-height
на 0
.