У меня возникла странная проблема с пробелами в проекте, который я строю.
Я создал <div> для элементов голосования - в нем есть кнопка повышения, уменьшение и общее количество голосов,каждый внутри своего собственного элемента <div> и использования <img> для кнопок.
Источник:
<div class="votebox">
<div class="vote"><img src="upvote.png" /></div>
<div class="votetotal">15</div>
<div class="vote"><img src="downvote.png" /></div>
</div>
В мини-сбросе в моем CSS оба <div> и *Элементы 1012 * определены для отображения без полей или отступов, и FireBug подтверждает, что эти конкретные элементы не имеют полей или отступов, но я вижу, что между нижними частями элементов <img> и нижней частью их соответствующих содержащих `элементов добавляется пробел..
Я добавил следующий CSS-код для отображения рамки вокруг каждого элемента:
.votebox * {
border: 1px #000 solid;
}
, и вот как это отображается в Firefox 3.6 (да, это изображения голосования StackOverflow .. I 'используя их в качестве заполнителей на данный момент):
Теперь очевидный ответ на эту проблему состоит в том, чтобы просто установить класс «голосование», чтобы иметь явную высоту изображений(и я сделаю это, возможно, даже выбрав CSS-спрайты вместо <img> s), но мне гораздо больше интересно узнать , почему эти элементы отображаются таким образом (это должно бытьпроект самообучения в конце концов).
Может ли кто-нибудь пролить свет на это для меня?
Редактировать: Стив Н указал мне, что я должен использовать схему, скореечем граница, чтобы показать внешние края элементов.Я сделал это изменение, а также разделил элементы в CSS, чтобы они отображались разными цветами.
Новый контур выглядит следующим образом:
Как выможно увидеть, проблема немного отличается от того, что я думал.Похоже, что под изображением есть некоторые пробелы, но это усугубляется тем фактом, что нижнее изображение, кажется, немного визуализируется вне его содержащего <div>.Это кажется мне странным.