Нежелательный отступ внизу div - PullRequest
Новая
       16

Нежелательный отступ внизу div

15 голосов
/ 05 октября 2009

Вот мой HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<div style="border:1px solid red; float:left; padding:0;">
    <img src="xxx.jpg">
</div>

Я не знаю, почему div содержит нижний отступ, даже если я установил отступ: 0.

Если я удалю DOCTYPE, эта проблема не возникнет. Есть ли другие способы решения этой проблемы без удаления DOCTYPE?

Ответы [ 3 ]

36 голосов
/ 05 октября 2009 
img { display:block; }

или 

img { vertical-align:bottom; }

будет работать. Поскольку изображения встроены, а текст встроен, пользовательские агенты оставляют место для символов по убыванию (y, q, g). Чтобы отменить этот эффект для изображений, вы можете указать любой из указанных выше стилей, хотя вы можете захотеть сделать правила более конкретными, чтобы не ориентировать изображение, на которое вы не хотите, чтобы это применялось.

Демо: http://jsbin.com/obuxu

Другая альтернатива, как указал другой автор, - установить высоту строки равной 0 для родительского элемента.

Техническое объяснение: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

9 голосов
/ 05 октября 2009

Установить высоту строки: 0; в стиле div: 

<div style="border:1px solid red; float:left; padding:0; line-height:0;">
<img src="xxx.jpg" />
</div>

img является встроенным элементом, поэтому он экономит место для персонажей со спуском. Регулировка высоты строки в div устраняет проблему. При желании вы также можете изменить img для отображения в качестве элемента блока.

0 голосов
/ 05 октября 2009

Вполне возможно, что то, что вы думаете о нижнем заполнении на div, на самом деле вызвано другим правилом стиля - например, заполнение на элементе body, что возможно, если вы включаете / отключаете режим причуд браузеров (воспроизведение с DOCTYPE, как правило, имеет такой эффект).

В этом случае должна быть возможность переопределить стиль по умолчанию с помощью правила пользовательского стиля.

Firebug может быть очень полезен, так как показывает, какие стили CSS влияют на какой элемент DOM.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...