Разница между display: contents и display: none в CSS заключается в следующем:

1. display: contents приводит к тому, что содержимое блока будет выведено как обычно, но окружающий его блок будет полностью опущен. 1 Правило влияет только на визуальное отображение блока на странице, но не на разметку внутри документа. 1
2. display: none приводит к тому, что на странице не будет отображаться ни сам блок, ни его содержимое. 1 Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. 4

Таким образом, главное отличие в том, что при display: none все потомки элемента исчезают, а при display: contents потомки этого элемента остаются видимыми и добавляются в дерево отрисовки вместо «пропавшего» родителя. 2