как убрать пробел между элементами div (создание CSS-графика)

Question

как убрать пробел между элементами div (создание CSS-графика)

0

Я создал график с использованием CSS, но я получил некоторые проблемы с внутренними divs (классы bar). Между внутренними divs есть белые пробелы. Я пробовал использовать float: left. он может удалять белые пробелы, но внутренние divs не смежны со дном внешнего div (класс графа).

Это пример ссылок (все еще не удалять пустое пространство): http://dabblet.com/gist/2779082
спасибо

HTML

<div class="graph">
    <div style="height: 22px;" class="bar"></div>
    <div style="height: 11px;" class="bar"></div>
    <div style="height: 6px;" class="bar"></div>
    <div style="height: 49px;" class="bar"></div>
    <div style="height: 28px;" class="bar"></div>
</div>

CSS

.graph {
    width: 50px;
    height: 50px;
    border: 1px solid #aeaeae;
    background-color: #eaeaea;
}

.bar {
    width: 8px;
    margin: 1px;
    display: inline-block;
    position: relative;
    background-color: #aeaeae;
    vertical-align: baseline;
}

brendan 08 нояб. 2013, в 14:27

Источник

0

да, это работает. Интересно, я должен добавить теги html comments между закрытыми и открытыми тегами div. </ div> <! - -> <div>
brendan 08 нояб. 2013, в 13:20

Теги:

html

css

6 ответов

Ещё вопросы

да, это работает. Интересно, я должен добавить теги html comments между закрытыми и открытыми тегами div. </ div> <! - -> <div>

Romain Braun · Answer 1 · 2013-11-08T11-21-00.000Z

Добавить

.bar {
    padding:0;
    margin:0;
 }

Daan Kleijngeld · Answer 2 · 2013-11-08T10-19-00.000Z

.bar {
    padding:0;
    margin:0;
 }

Я почти уверен, что белое место исчезнет, а потому, что граница будет другим цветом. он берет 1px с каждой стороны вашего div.

Всегда всегда будет разница между вашим div.

Adil · Answer 3 · 2014-12-31T08-41-00.000Z

Я думаю, ответ слишком запоздал для этого quesiton, но ответ может помочь кому-то другому, у кого такая же проблема.

На самом деле я не отвечаю на этот вопрос, ответ приведен ниже.

Почему существует необъяснимый разрыв между этими элементами divline-блока?

Adel · Answer 4 · 2014-02-25T08-21-00.000Z

Вам нужно удалить пробелы между div, Попробуйте следующее вместо

<div class="graph">
    <div style="height: 22px;" class="bar"></div>
    <div style="height: 11px;" class="bar"></div>
    <div style="height: 6px;" class="bar"></div>
    <div style="height: 49px;" class="bar"></div>
    <div style="height: 28px;" class="bar"></div>
</div>

точно так же без пробелов между divs

<div class="graph">
    <div style="height: 22px;" class="bar"/>
    <div style="height: 11px;" class="bar"/>
    <div style="height: 6px;" class="bar"/>
    <div style="height: 49px;" class="bar"/>
    <div style="height: 28px;" class="bar"/>
</div>

Sasidharan · Answer 5 · 2013-11-08T11-29-00.000Z

Просто добавьте margin:0; вам bar css, пробелы между вашими графами удаляются.. Вы можете видеть это на изображении...

Joren · Answer 6 · 2013-11-08T09-54-00.000Z

Добавить padding: 0px; на ваш .graph