display property in css

• display:none - Element is removed from DOM.
• display:block - Element takes entire available width. Also new line is added before and after element.
• display:inline - Element acts as inline meaning it occupies only necessary width and height and width properties will have no impact on it.
• inline-block - Element is treated as inline element but we can apply height and width properties.
• flex - Element is treated as a block element and flex container
• grid - Element is treated as a block element with grid container
• list-item - for list items, display is set as list-item

Difference between display and visibility properties

with display set to none, element is removed from DOM but with visibility set to hidden, element still exists in DOM and only opacity is changed to 0. Pointer and keyboard events are turned off when visibility is hidden. But when only opacity is set to 0, pointer and keyboard events are on.