Редактирование отступа ячейки таблицы углового материала

Question

Когда я проверяю элемент с помощью инструментов разработчика, он показывает заполнение нулями, но когда я смотрю на него и налагаю на него мышью, он очень четко обнаруживает заполнение внутри ячейки.Я понятия не имею, откуда это исходит, и установка td { padding: 0 !important } ничего не делает.

Answer 1

Воспринимаемое заполнение вызывается display: table-cell; и vertical-align: inherit; (обычно это значение middle) из стилей браузера / user-agent <td> по умолчанию в сочетании с height, установленным на tr.mat-row.<tr> с CSS-классом .mat-row имеет установленную высоту по умолчанию 48px.Вы можете отрегулировать высоту или установить height: auto;, а затем отрегулировать заполнение до td.mat-cell по мере необходимости.Это эффективно удаляет видимое заполнение, которое видно при проверке с помощью инструментов разработчика.Визуализация с зелеными отступами, наблюдаемая в инструментах разработчика Chrome при проверке <td>, показывает, как в инструментах отображается только средний вертикально выровненный элемент с ячейкой таблицы.Если вы изучите свойства компьютера этого <td>, то увидите, что он имеет нулевое заполнение со всех четырех сторон.

.mat-row {
  height: auto;
}

.mat-cell {
  padding: 8px 8px 8px 0;
}

Вот StackBlitz , показывающий height: auto; на tr.mat-row, а также пользовательское значение заполнения для td.mat-cell в действии.

Хотя я рекомендую избегать изменения значения свойства display на td.mat-cell, вы можете изменить его на что-то вроде inline-block чтобы увидеть эффекты без каких-либо настроек height из mat-row.

Надеюсь, это поможет!