Tricky CSS questions

#css #webdev #beginners #tutorial

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 elements make their parent container height 0px?

Ques. 2 - Why inline-block elements have default space between them even there is no margin?

Ques. 3 - How clearfix works in CSS ?

Ques. 4 - How to center element in absolute or relative positioning without using margins or paddings or text align?

Ques. 5 - Can we use margins in html email templates?

Ques. 6 - Can we manually provide width and height to span element and if no how can we do it?

Ques. 7 - how can we change the scrollbar styling in CSS?

Ques. 8 - Suppose you have 12 paragraphs , how can you target and give every fourth element a text color of violet?(this one not so tricky)

Ques. 9 - Suppose we have a triangle shape in a div how can we provide the shadow to the triangle ? (Box shadow will provide the shadow to the div element which will be sqaure but not to the triangle)

Ques. 10 - Suppose we have 5 elements and we provided an animation to all those 5 elements but we want to have a delay of 0.3s between every element, first will run after 0.3s, second will run after 0.6s and so on. How can we give that delay without using separate classes to those elements and using a single class to all elements?

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (14)

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;
}