The front-end developers interview always covers CSS questions. The CSS related questions goes from basic to advanced level. The basic knowledge of CSS is vital for front-end developer position. If we want to claim as full stack web developer then you will have to have some CSS basic knowledge. Many software developers think CSS is so easy and feel bit reluctant doing it. But having some CSS knowledge is useful case of web development. How DOM elements are styled with CSS is good to know as a developer. Following are some really useful advanced CSS interview questions:
Advanced CSS interview questions
What is the relation between line-height and font-size of an element?
To calculate the line-height space on top and bottom of an element, substract the font-size and then distribute the remaining pixels equally on top and bottom.
When font-size: 16px and line-height: 1 then?
When an element has a font-size 16px and line-height 1 which means font-size and line-height is equal (line-height=font-size * 1). So no space on the top and bottom of that element.
When font-size:16px and line-height:1.5 then?
In this case the line-height will be 24px becuase line-height=font-size * 1.5. So the element will have 4px on space on the top and 4px space on the bottom.
When font-size:16px and line-height:20px then?
In this case the line-height is 20px. So the element will have 2px on space on the top and 2px space on the bottom.
What are the differences between display:block, display:inline-block and display:inline in CSS?
|Respect left & right margins and paddings, but not top & bottom||Respect all margins and paddings||Respect all margins and paddings|
|Ignore the width and height||Respect width and height||Respect width & height, takes full width if not defined|
|Allow other elements to sit to the element’s left and right||Allow other elements to sit to the element’s left and right||Force a line break after the block element|
What is the relation between content-box and border-box of CSS box model?
Which one is better between translate() and absolute positioning?
What are different types of media properties?
What is margin collapse in CSS?
How the browser reads selector from left-to-right or from right-to-left?
What are different ways you can visually hide content?
What is CSS specificity? What are the rules of CSS specificity?
Why !important is not a good practice?
Advanced CSS questions