В чем разница между display: contents и display: none в CSS?

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

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

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