Блог

Главная - Вопросы по программированию - Почему мои divs действуют так, как будто я указал полтора сантиметра margin-top / margin-bottom?

Почему мои divs действуют так, как будто я указал полтора сантиметра margin-top / margin-bottom?

#javascript #html #css #angularjs #margin

#javascript #HTML #css #angularjs #маржа

Вопрос:

Я работаю над приложением AngularJS и сталкиваюсь с нежелательными пробелами.

 <div class='user' ng-repeat='session in sessions'>
    <div class='text' ng-bind='monologues[session][0]'></div>
    <div class='timestamp' ng-bind='monologues[session][1] | to_locale'></div>
</div>

Я указываю минимальную высоту для div.user (динамически вычисляется с помощью jQuery), и нет высоты или поля для div.text или div.timestamp. Инспектор элементов Chrome, похоже, не выдает ничего похожего на margin или min-height для div.text или div.timestamp. Ручное указание нулевого поля и минимальной высоты для div.user:

    <style type="text/css">
        div.user
            {
            overflow-y: auto !important;
            white-space: pre-wrap;
            }
        div.user div
            {
            margin: 0;
            min-height: 0;
            }
        input[type='text']
            {
            width: 100%;
            }
        textarea
            {
            width: 100%;
            height: 150px;
            }
    </style>

На странице используется CSS H5BP, но комментарии к включениям в этот файл не меняют поля вокруг двух внутренних div на div.user.

Есть ли другие вещи, которые могут привести к нежелательному поведению, подобному марже?

Комментарии:

1. Какой элемент имеет нежелательный пробел div.user или div.text ?

2. div.text и div.timestamp действуют так, как будто у них есть нежелательные пробелы; div.user прокручивается, как и следовало ожидать от тех элементов, которые имеют нежелательные пробелы. Однако я не смог найти пробелы с помощью инспектора Chrome.

3. Вы можете попробовать font-size: 0 div.user и посмотреть, устраняет ли это нежелательные пробелы в дочерних элементах.

4. Что ваш отладчик браузера говорит об этих divs?

5. Вы пробовали это без white-space: pre-wrap; ?

Ответ №1:

Ваша white-space: pre-wrap; проблема вызывает проблему

см http://jsfiddle.net/GVTr2 /

Теперь это с ним

http://jsfiddle.net/GVTr2/1/

Я не знаю, зачем вам это нужно, но что касается вашего вопроса, то это причина

 div.user {
    overflow-y: auto !important;
}

Если вы действительно хотите сохранить его, тогда вы можете разместить свой html в одной строке, как показано ниже

 <div class='user' ng-repeat='session in sessions'><div class='text' ng-bind='monologues[session][0]'>asfafd adsfds</div><div class='timestamp' ng-bind='monologues[session][1] | to_locale'>sdf sdf as</div></div>

или

http://jsfiddle.net/GVTr2/2/

Определение font-size: 0 для вашего родителя и определение a font-size для дочерних элементов. Это не идеальный способ сделать что-то, потому что это может быстро стать действительно запутанным.

Я думаю, что лучший способ — не использовать предварительный перенос