Почему при рендеринге ReactMarkdown между элементами существует чрезмерное расстояние? ⇐ CSS

[Anonymous]

Я использую Next.js 15 с Tailwind CSS V3 и пакетом react-markdown для рендеринга результатов чата AI внутри компонента.
Я настроил рендеринг уценки, чтобы заменить все элементы , , на стилизованные. использует классы Tailwind, чтобы избежать проблем с типографским интервалом по умолчанию.
Несмотря на это, между элементами по-прежнему остается избыточное вертикальное пространство — особенно при заменах h1, h2 и h3. Я пробовал удалить все поля и добавить mb-0, mt-0 и т. д., но пробелы остались.
Вот как это выглядит (я добавил цвета фона и аннотации отладки):



Что я использую:

• Next.js 15
• React 19
• ReactMarkdown act-markdown@9
• Tailwind CSS v3
• Плагины:
  

  Код: Выделить всё

  remark-gfm
  [*]rehype-highlight
  [/list]
  
  
  
  Ожидаемый результат:
  Минимальное вертикальное расстояние между элементами в пузырьках чата.
  Фактический результат:
  Заголовки и следующее за ними содержимое имеют нежелательный вид пробелы, которые не схлопываются.
  
  Код (ChatPage.tsx)
   (
  
  ),
  h2: ({ node, ...props }) => (
  
  ),
  h3: ({ node, ...props }) => (
  
  ),
  p: ({ node, ...props }) => (
  
  ),
  ul: ({ node, ...props }) => (
  [list]
  ),
  li: ({ node, ...props }) => (
  [*]
  ),
  code: ({ node, ...props }) => (
  
  ),
  pre: ({ node, ...props }) => (
  
  )
  }}
  >
  {msg.text}
  
  
  
  Попробовал:
  
  Заменить все заголовки тегами 
  [*]Обнулить поля с помощью mb-0, mt-0
  [*]Уменьшить соседний интервал с помощью [+ *] в Tailwind
  [*]Проверка вычисляемых стилей — никаких неожиданных полей
  [/list]
  
  Вопрос:
  [list]
  [*]Есть ли что-то в структуре реакции или в том, как она анализирует элементы, которые по-прежнему вызывают вертикальные промежутки между компонентами пользовательского заголовка и их последующими одноуровневыми элементами?
  
  [*]Нужно ли мне обертывать дочерние элементы или сглаживать структуру блоков?
  
  [/list]
  Будем очень признательны за любые советы.
  Пример того, что отображается в DOM
  
  
  useMemo

  and

  Код: Выделить всё

  useCallback

  are both hooks provided by
  React to optimize performance by memoizing values or functions. Let's break down the differences
  and when to use each:
  
  useMemo
  
  Purpose:

  Код: Выделить всё

  useMemo

  is
  used to memoize a computed value.
  
  Syntax:
  class="bg-orange my-2 overflow-x-auto rounded p-2"
  >

  Код: Выделить всё

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  

  When to Use:
  • Expensive Calculations: Use

    Код: Выделить всё

    useMemo

    when you have a calculation
    that is computationally expensive and you want to avoid recalculating it on every render
    unless its dependencies change.
  • Derived State: When deriving state from props or state that requires some
    computation.
  
  
  
  Подробнее здесь: https://stackoverflow.com/questions/795 ... -rendering