Несоответствие вертикального выравнивания между различными представлениями в макете липкого заголовка React ⇐ Javascript

[Anonymous]

Я создаю панель мониторинга с помощью React и Tailwind CSS. Макет состоит из боковой панели и области основного контента. И заголовок боковой панели, и заголовок основного контента имеют фиксированную высоту h-28, чтобы обеспечить их горизонтальное выравнивание.
Однако я столкнулся со странной проблемой: в представлениях «Панель мониторинга» и «Управление» контент имеет идеальный вертикальный зазор с заголовком, но в представлениях «Журнал» и «Отладка» контент, кажется, «прилипает» непосредственно к верхнему заголовку или смещен по сравнению с другими представлениями.
Вот соответствующая структура макета:

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

// Main Layout


{view}


{view === 'dashboard' && renderDashboard()}
{view === 'logbook' && renderLogbook()}

А вот и разница в моих функциях просмотра:

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

// Dashboard - Aligns perfectly
const renderDashboard = () => (


{/* Filter Content */}


);

// Logbook - Sticks to the top / misaligned
const renderLogbook = () => (


System Events

{/* Table Content */}

);

Почему представление «Панель мониторинга» правильно учитывает вертикальный интервал, а представление «Журнал» — нет, хотя они оба отображаются внутри одного элемента div с отступом p-20? Связано ли это с тем, как пробел или внутренние поля карты взаимодействуют с отступами родительского контейнера?

Подробнее здесь: https://stackoverflow.com/questions/798 ... cky-header