Странная ошибка с границей / контуром / полем / отступом - PullRequest
Новая
       59

Странная ошибка с границей / контуром / полем / отступом

0 голосов
/ 19 июня 2011

HTML (3 раза): 

<div class="scream">
  <div class="author">
    <img src="avatars/dagrevis.png" alt="" title="daGrevis" />
  </div>
  <div class="data">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</span>
  </div>
  <div class="clearer"></div>
</div>

CSS: 

.scream {
  background: #F4F4F4;
  width: 944px; height: 48px;
}

.scream .author {
  float: left;
}

.scream .data {
  float: left;
}

.clearer { clear: both; }

Вот как это выглядит в моем браузере:

My situation.

Как видите, height установлен на 48 пикселей. Размер изображения также составляет 48 пикселей. Как получается, что я не вижу каждую div.scream в отдельной строке? Например, если я установлю height на 50px, все будет работать! По моему мнению, это потому, что есть какая-то граница / контур / поле / отступы, которые разрушают мою жизнь. К сожалению, с FireBug я не вижу ничего подобного ...

Ответы [ 2 ]

5 голосов
/ 19 июня 2011

enter image description here

Нижний край изображения по умолчанию выравнивается по базовой линии (серая линия) линейного блока.Пространство ниже базовой линии (также называемое «спусковым пространством») - вот что вызывает вашу проблему.См. эту статью Эрика Мейера для более подробной информации.

Чтобы исправить это, добавьте это правило: 

.scream .author img {
    display: block;
}

Или вот это: 

.scream .author img {
    vertical-align: bottom;
}
0 голосов
/ 19 июня 2011

Если вы немного поэкспериментируете с инспектором DOM, вы обнаружите, что .author выходит с высотой 52px или около того. Похоже, что дополнительные 4 пикселя идут от line-height. Установка line-height в 0: 

.scream .author {
    float: left;
    line-height: 0;
}

Исправлена ​​раскладка: http://jsfiddle.net/ambiguous/8KzdD/

Или вы также можете перемещать изображение влево: 

.scream .author {
    float: left;
}
.scream .author img {
    float: left;
}

Это удалит изображение из локального потока и сделает line-height неактуальным: http://jsfiddle.net/ambiguous/8KzdD/1/

Еще один вариант - отказаться от очистки <div> и использовать overflow:hidden на внешнем <div>: 

.scream {
    background: #F4F4F4;
    width: 944px;
    height: 48px;
    overflow: hidden;
}

Это оставит <div class="author"> с их высотой 52px, но эффект не будет визуально заметен: http://jsfiddle.net/ambiguous/8KzdD/2/

...