If you are a frontend developer at the beginning of your career I’m sure you wonder how to prepare for your first interview. I’m going to focus on technical questions you may be asked and prepare answers for you.

In this article, I’m going to explain to you a difference between display:none and visibility:hidden properties as this is one of the questions you may hear during an interview for a frontend developer position.

Let’s use the following example to visualize the difference.

Here we have four cards and want to make Card 2 invisible. In general, both properties make it possible.

If we use display:none property the result will be the following:

As you can see Card 2 is not visible anymore and the remaining cards changed their positions so the margin we defined for them can be maintained.

Let’s check now what happens if we set the visibility:hidden for Card 2.

As you can see it’s also not visible anymore like in the previous case but its spot is empty and other elements didn’t change their positions. The margins of the Card 2 have been maintained and all elements around behave as it was still there.

I hope it explains well the difference between those two properties but if you still have any questions let me know.