Как уменьшить высоту строки, если высота строки ничего не делает?

Question

Я пытаюсь изменить межстрочный интервал на одинарный интервал для текста сводки в промежутке в верхнем левом блоке в разделе «Работы» в http://alexanderwales.com (и нет, я не Александр Уэльс, просто случайный фанат). Текст имеет довольно большой интервал между строками, он выглядит примерно через два интервала.

line-height: normal !important ничего не делает. Из моего ограниченного опыта css это должно было сработать.

Комментирование обеих высот строк в теле улучшает интервал, но я не уверен, почему.

Если вы знаете ответ на вопрос Мне также было бы очень интересно узнать, как вы получили этот ответ. В отличие от обычного кода, когда у меня возникают проблемы CSS, я понятия не имею, как их отлаживать, кроме того, что гуглюсь и разбираюсь, пробуя случайные вещи, пока он не работает.

Xpath рассматриваемого элемента на случай, если я этого не сделал достаточно хорошо описать это: / html / body / div [1] / main / div / div / div / div / div / div / section [3] / div / div / div [1] / div / div / section / div / div / div / div / div / div [2] / div / span

Это тот, который говорит: «Подросток, борющийся после смерти своего лучшего друга, оказывается в мире фантазий - тот, который, кажется, быть объединением каждой кампании Dungeons and Dragons, в которую они когда-либо играли вместе. "

Answer 1

В инструментах chrome dev есть вычисляемая вкладка, когда элемент выбран. Вы можете использовать это, чтобы увидеть, как конкретный стиль применяется к элементу и откуда. Вы можете go пройти через каждую его часть и отключить их, чтобы увидеть, откуда поступают стили и как лучше их переопределить.

В этом случае все, что вам нужно сделать, это применить высоту строки к div .elementor-widget-container, который является родителем этого диапазона, а затем компоненту будет соответствовать высота строки.

Answer 2

Я пытаюсь изменить межстрочный интервал на одинарный интервал для текста сводки в диапазоне

Диапазон имеет display: inline, высота строки не работает для встроенных элементов .

Я думаю, что идея заключается в том, что если у вас есть встроенный элемент в блоке текста, CSS spe c предполагает, что вы не захотите его иметь линия с высотой строки, отличной от остальных, поэтому она не позволяет вам установить высоту строки. Например, если бы у вас было

<p>lorem ipsum. 
Sed ut <em>perspiciatis unde</em>
ut aliquid ex 
ea commodi consequatur? </p>

, было бы странно, если бы вторая строка имела высоту строки, отличную от остальных.

Важное примечание: высота строки - не единственное это не работает для встроенных элементов. Читайте больше на CSS display: inline vs inline-block

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

Когда комментатор попытался ответить на вопрос, я погуглил еще немного и в итоге наткнулся на ответ stackoverflow про встроенные элементы Если в будущем у меня возникнут проблемы, я должен добавить элемент html, с которым у меня проблемы. Например, поисковый запрос Google "span line-height not working" ответил бы на мой вопрос во втором результате. Так что, к сожалению, стратегия в основном остается «гуглить и пробовать случайные вещи», но, если честно, вы можете сказать, что в значительной степени это отладка. Или вы можете сказать «исследовать и экспериментировать с образованными догадками», если вы хотите быть модным.

Answer 3

похоже, что есть свойство высоты строки в вашем элементе div с классом "elementor-widget-container" (некоторое значение, унаследованное от тела), я удалил это в devtools, а высота строки выглядит меньше.

а как я туда попал? Я обычно проверяю свойства родительского компонента, чтобы найти что-то, что может «просочиться».