Почему два одинаковых пролета имеют разную ширину?

0

У меня есть два одинаковых промежутка, но по какой-то причине второй отображается более узким. JSFiddle сейчас выключен, вот полный пример html:

<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <span style="background-color:#ccc; margin-right:0.125em;">
            &nbsp;&nbsp;&nbsp;
        </span>
        <span style="background-color:#ccc; margin-right:0.125em;">
            &nbsp;&nbsp;&nbsp;
        </span>
    </body>
</html>

Кажется, последний из них уже уже, но если я добавлю больше промежутков, он становится еще более странным. Первая из них будет иногда иметь разную ширину, со значением между широкими средними и узким последним.

Что мне не хватает?

  • 0
    поиграть
  • 1
    @SridharR: JSFiddle is down right now и я могу это подтвердить.
Показать ещё 2 комментария
Теги:

3 ответа

1
Лучший ответ

На первом добавляется дополнительное пространство. Если все интервалы являются однострочными, это работает так, как ожидалось:

<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <span style="background-color:#ccc; margin-right:0.125em;">&nbsp;&nbsp;&nbsp;</span>
        <span style="background-color:#ccc; margin-right:0.125em;">&nbsp;&nbsp;&nbsp;</span>
        <span style="background-color:#ccc; margin-right:0.125em;">&nbsp;&nbsp;&nbsp;</span>
    </body>
</html>

Что вы пытаетесь архивировать? Если вы хотите, чтобы все промежутки имели одинаковую длину, вы должны сделать это в CSS, установив

span {
    display: inline-block;
    width: 2rem;
}
Поделиться
  • 0
    Спасибо, это сработало хорошо. Это гистограмма бедняка, которая динамически генерируется приложением. Я не знал о inline-block .
  • 0
    Для дальнейшего использования я только что разобрался с последним фрагментом головоломки: поскольку ширина определена в em s, вычисленное значение получается 10.5px поэтому Chrome чередуется между 10px и 11px (чтобы минимизировать ошибки округления?). Установка ширины в px исправляет это.
Показать ещё 2 комментария
0

Проблема заключается в пробеле между тегами.

Не работает:

<body>
  <span margin-right:0.125em;"> &bnsp; </span>
  <span margin-right:0.125em;"> &bnsp; </span>
</body>

Работает хорошо:

<body>
  <span margin-right:0.125em;"> &bnsp; </span>
  <span margin-right:0.125em;"> &bnsp; </span>
  works well because of this text
</body>

Как взломать его:

span:after {
  content: '';
  display: inline-block
}

Как исправить это правильно (уменьшить код):

<body><span margin-right:0.125em;"> &bnsp; </span><span margin-right:0.125em;"> &bnsp; </span></body>

Демонстрация исправления с дополнительным текстом:
http://jsbin.com/AFuPomI/1/edit

это также может помочь:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Поделиться
0

Я думаю, причина, что маржа не расширяет ширину родительского элемента http://jsbin.com/eHaNIR/1

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню