Home
Basics
Introduction Adding styles Selectors Headings and Text Lists Links Tables Colors Background Box Model Fonts Icons Display Position Overflow Align Images Tool tips FlexAdvanced
Shadows Rounded Corners Units Specificity Responsive design Media Queries Grid Animations Psuedo elements CSS variables and functions SASS and SCSSMiscellaneous
CSS Templates CSS Interview QnAdisplay 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.Web development and Automation testing
solutions delivered!!