Вопрос по css, html5 – HTML 5 странно img всегда добавляет маржу 3px внизу

122

Когда я меняю свой сайт на

<!DOCTYPE HTML>

Каждый элемент img, заключенный в DIV, имеет нижнее поле в 3 пикселя, даже если это поле не определено в CSS. Другими словами, нет никаких стилевых атрибутов, которые вызывают нижнее поле в 3 пикселя.

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

Теперь предположим, что haha.jpg имеет размер 50x50, а для .placeholder установлено значение display: table. Как ни странно, размеры высоты .placeholder в моем наблюдении составляют 50x53 ...

Кто-нибудь сталкивался с этой аномалией раньше и исправлял ее?

EDIT

Вот JS FIDDLE

http://jsfiddle.net/fRpK6/

Вот почему вы должны использовать Reset CSS. xbonez
@ xbonez У меня есть reset.css, это не имеет значения, проверьте скрипку JS shiva8
@JamesKhoury добавил jsfiddle, обратите внимание, что .placeholder с черным фоном не соответствует высоте img правильно. shiva8
Можете ли вы сделать jsfiddle.net в качестве примера? включить некоторые соответствующие CSS у вас есть? James Khoury
Эквивалентный вопрос:stackoverflow.com/questions/7774814/… (Есть наверное другие) Brilliand

Ваш Ответ

11   ответов
0

Таким образом, методы ниже могут быть полезны

img {
display: block;

} or

img {
vertical-align: top/middle/...;

}

или же

.placeholder {
font-size: 0;

}

Error: User Rate Limit Exceeded
1

display: block чтобы исправить это, у меня есть эта проблема с изображениями внутри плавающих div.

0

У меня была упаковкаdiv сdisplay: flex;.

Мне удалось заставить это работать, добавив:align-items: flex-start; к упаковочному div и ко всем изображениям:display: block;.

Прежде чем я прямо сказал контенту для выравнивания, он испортил макет. После установки его на flex-start все работает как шарм.

1

почему это происходит, но укажите ваш заполнитель div font-size: 0px;

.placeholder {
    font-size: 0px;
}
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded shiva8
0

в чем именно проблема, но я попробовал это с 2 различными вариантами: сначала примените класс к тегу img, это будет работать, а затем примените размер шрифта 0 px;

http://jsfiddle.net/fRpK6/3/

display: tableError: User Rate Limit ExceededdisplayError: User Rate Limit Exceededblock, list-item, tableError: User Rate Limit Exceededtable-*Error: User Rate Limit Exceeded
21

display:block или жеdisplay:inline-block по мере необходимости.

Error: User Rate Limit Exceededdisplay:inlineError: User Rate Limit Exceeded
display:blockError: User Rate Limit Exceededdisplay:inline-blockError: User Rate Limit Exceeded
Error: User Rate Limit Exceededhere, +1
Error: User Rate Limit Exceededinline-blockError: User Rate Limit Exceededinline-blockError: User Rate Limit Exceeded
Error: User Rate Limit Exceededdisplay:inline-blockError: User Rate Limit Exceeded
0

Бывает и с кучейdivs, просто добавьfloat имущество. Пример:

<body>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
</body>

Проблемный CSS:

.piledUpDiv{
    width:100%;
    display:inline-block;   
 }

Решение:

.piledUpDiv{
    width:100%;
    display:inline-block;
    float:left; 
 }
floatError: User Rate Limit ExceededdisplayError: User Rate Limit Exceeded
255

что изображение ведет себя как символ текста (и, таким образом, остается пространство под ним, куда будет вешаться часть «y» или «g»), и решается с помощьюvertical-align Свойство CSS, чтобы указать, что такое пространство не требуется. Почти любая ценностьvertical-align Сделаю; Я люблюmiddleлично.

img {
    vertical-align: middle;
}

jsFiddle:http://jsfiddle.net/fRpK6/1/

Error: User Rate Limit Exceededdisplay: blockError: User Rate Limit Exceeded
Error: User Rate Limit Exceededvertical-align: baselineError: User Rate Limit Exceededvertical-alignError: User Rate Limit Exceededtop, text-top, middle, bottomError: User Rate Limit Exceededtext-bottomError: User Rate Limit ExceededsubError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
3

Я верю в сеттинг

line-height: 1;

на изображении также исправит эту проблему, особенно если он находится в отдельном блоке.

1

Для меня это было сочетание

font-size: 0px;
line-height: 0;

на упаковочном контейнере, который это исправил.

6

это решает мою проблему.

line-height: 0;
Error: User Rate Limit Exceededfont-size: 0px;Error: User Rate Limit Exceeded

Похожие вопросы