Как я могу удалить необъяснимый пробел / пробел под изображениями сетки в темах Wordpress

#html #css #wordpress #elementor

#HTML #css #wordpress #elementor

Вопрос:

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

Я добавляю пользовательский html в тему WordPress с помощью пользовательского HTML-элемента / виджета Elementor Builder

К сожалению, под каждым изображением проигрывателя есть пробел

Должно выглядеть так https://jmp.sh/Fq5a0TA

Я бы очень хотел использовать его с темой Hello Elementor на новом веб-сайте, но этот пробел для меня является препятствием

Затем я протестировал его с рядом других тем со следующими результатами

WP 2020, Astra и OceanWP не имеют этой проблемы, нет пробелов, идеально

WP 2019, Neve и Generate Press также имеют проблему, видимый пробел

Я исчерпывающе сравнил css тем, которые имеют и не имеют пробелов, и я не могу понять причину

Я могу устранить пробел, добавив css line-height или font-size: 0; в элементе элемента сетки, но это не реальное решение, просто имеющее дело с симптомом, поскольку темы, в которых нет пробелов, имеют высоту строки и размеры шрифта больше 0

Я установил каждую тему в последней версии WP на отдельных тестовых сайтах и использую только плагины Elementor и Simple Custom CSS, шаблон страницы устанавливается на elementor canvas при каждой установке

Я думаю, что это связано с тем, как каждая тема связана с сбросом или нормализацией css, но может быть неправильным

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

Я действительно не хочу использовать другую тему, если я могу помочь

С наилучшими пожеланиями, Эшли

Ответ №1:

Я только сравнил wp2020 и neve, но предполагаю, что это будет аналогичная проблема.

В версии wp2020, если вы поищете тег раздела с классом «elementor-element-e86902a», вы увидите, что он наследует некоторые стили из http://www.calpeguide.com/wp2020/wp-content/themes/twentytwenty/style.css?ver=1.5 они отсутствуют в эквивалентном теге раздела (elementor-element-54a1e41) на сайте neve.

Это все, что я мог видеть, поэтому, возможно, стоит попытаться воссоздать на сайте neve.

Ответ №2:

Изображение должно иметь свойство отображения, будь то блок, встроенный блок и т. Д

1. Спасибо, я обнаружил, что причиной было отсутствие свойства отображения тега img — я прочитал ваш комментарий и немного прочитал о свойствах отображения, и в этом случае это должно быть свойство уровня блока или блока, такое как flex или grid, поскольку свойства высоты и ширины не влияют на встроенные или встроенные свойства уровня в соответствии с w3school- спасибо за интерес и комментарий — заставил меня узнать больше — всего наилучшего, Эшли

Ответ №3:

Я нашел ответ, в теге img отсутствовал display: block;

На самом деле просто, но как найти иголку в стоге сена

В конце я использовал старую технику решения проблем, которую я изучил в 70-х годах в качестве теста для учеников, уменьшил систему вдвое, снова протестировал, снова уменьшил вдвое и т. Д

Я добавил все 6500 строк reset css из темы wp2020 в тему wp2019 и начал оттуда

Спасибо, что посмотрели на меня

С наилучшими пожеланиями, Эшли