DEV Community

Tricky CSS questions

Shubham Tiwari on September 13, 2022

Hello Guys today i want to ask some basic but tricky questions in CSS which i found interesting. Let's get started... Ques. 1 - Why float elemen...

Read full post

Christopher Arnold • Sep 13 '22

do you have an answer sheet, so I can see how many i got right? jk

Shubham Tiwari • Sep 14 '22

Yeah i have the answers which i found when i encounter these problems or questions but there could be better answers than these as i am still not a pro developers 😁

Answers -

Float elements come out of the flow of the parent container and becomes visible for the parent container.So, the parent container behaves as empty and its height becomes 0px.
When we set the elements as inline-block , there are spaces because while creating the html structure we have some spaces between the tags and also have new line space like we create two elements in different line.So, those spaces are added when we set those elements as inline-block.We can solve this using negative-margins.
Clearfix hack fix the 0px height problem of float elements parent container.It is used with ::before and ::after pseudo-selector and using the clear property,it clears the floats on both the sides.
position:absolute; top:50%; left: 50%; transform:translate(-50%,-50%); (also provide the height to the container if it is not larger)
We should not use margins in html email templates as margins are not supported in outlook.com so the design will not be same as expected in outlook
We cannot manually provide the width and height to span element but we can do it by making it a block element
using the selectors - ::-webkit-scrollbar , ::-webkit-scrollbar-track ,::-webkit-scrollbar-thumb.
p:nth-child(4n);
Using the filter:drop-shadow()
We can provide the different delay time to all the 5 elements using nth-child selector or we can use variables by provide a different variable value to each element and then calculate the delay value separately using calc(--var(variable_value))

IF YOU HAVE A BETTER ANSWERS OR APPROACH PLEASE MENTION IT HERE

TechMan09 • Sep 13 '22

Question 11: What is the best way to center a Div, both verbally and horizontally in front of text?

Colin Stewart • Sep 17 '22

Verbally:

GO TO THE MIDDLE IN FRONT OF TEXT

Horizontally:

.parent-with-text {
    position: relative;
}
.child-over-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}