пробел: предварительная строка добавляет необычное пространство сверху

Question

У меня есть нижеприведенное объявление css, которое добавляет межстрочный интервал, указанный на скриншоте ниже.

.colGroup{
    white-space: pre-line;
}

Я попытался добавить атрибуты ниже, но безуспешно.

display: inline-block;
vertical-align: top;
height: 4.75em;
line-height: 1.75em;

РЕДАКТИРОВАТЬ (добавлена ​​часть повторяющегося тега <td>, где я сталкиваюсь с этой проблемой).

<td width="15%">
    <span class="colGroup">
       <div>
            <p id="c2308view">
                t = 24 
                t1 = 27 
                t2 = 27 
                t3 = 36
                </p> 
            </div>
        </span>
        <span class="dateColumn">
            <div>
                <p id="c2312view"><span>31-Dec-2010</span></p>
            </div>
        </span>
</td>

Может ли кто-нибудь помочь?

Answer 1

Мне недавно пришлось столкнуться с тем, как различные значения white-space обрабатываются в css.Документация по MDN для пробелов очень полезна.См. Это и всю страницу: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values

Что это означает, когда вы используете следующий CSS?

white-space: pre-line;

Thisсохранит разрывы строк в вашем коде, в то же время свернув пробелы.Разрывы строки могут быть эксплицированными <br/> элементами или символами новой строки.

Снова посмотрите на свой код. Обратите внимание, что, хотя вы не видите символа, вы возвращаетесь три раза, прежде чем доберетесь до значений в элементе <p>.Существует скрытый символ newline, читаемый DOM.

<span class="colGroup"> /* newline character 1 */
   <div> /* newline character 2 */
        <p id="c2308view"> /* newline character 3 */
            t = 24 /* newline character 4, which I assume you want to preserve */

Если вы удалите эти возвраты из своего кода, в то время как синтаксис не так уж и удобен для чтения, он будет учитывать значение white-space, которое выжелают.

См. Фрагмент ниже:

.colGroup {
    white-space: pre-line;
}

<td width="15%">
    <span class="colGroup"><div><p id="c2308view">t = 24 
t1 = 27 
t2 = 27 
t3 = 36</p></div></span>
    <span class="dateColumn">
        <div>
            <p id="c2312view">
                <span>31-Dec-2010</span>
            </p>
        </div>
    </span>
</td>

Answer 2

Я столкнулся с этим только вчера.Я сделал что-то вроде этого:

.colGroup{
white-space: pre-line;
margin-top: 0px;
}