1. What's the difference between display none and visibility hidden?

display:none removes the element from the normal flow of the page, allowing other elements to fill in.
visibility:hidden leaves the element in the normal flow of the page such that is still occupies space.

2. What's the difference between inline, inline-block, block

inline The element doesn’t start on a new line and only occupy just the width it requires. You can’t set the width or height.
inline-block It’s formatted just like the inline element, where it doesn’t start on a new line. BUT, you can set width and height values.
block The element will start on a new line and occupy the full width available. And you can set width and height values.