Difference between inline and inline-block....

in short...

inline-block - only takes up the amount of width that it requires and respects other elements. It has the same qualities of a block element without taking up the entire width of it's parents. This means that they do not overlap or lay on top of each other.

inline - also only takes up the amount of width it requires but does not always respect other elements. They can overlap.

If you want a very detailed description, go here https://css-tricks.com/almanac/properties/d/display/

Key aspects to remember:

Similarities:

• Share a horizontal plane. Items align side-by-side. Wrapping is enforced by their container's width.
• Have left and right margins

Differences:

• margin: Inline-block has top and bottom margins; Inline does not.
• height: Inline-block has it and can be set; Inline does not.
• width: Inline-block has it and can be set; Inline does not.
• padding: Inline-block - padding is included when determining width and height; Inline inlcludes padding for determining width, but does not for height.

In regards to inline and height, using padding-top and padding-bottom have no effect on the placement of the content. This means that content placement within the y-axis (vertical plane) is still on the baseline of the x-axis (horizontal plane), i.e. content is not pulled down nor pushed up. The baseline of the content of an inline element is set to the bottom of the element that has the largest height property (such as block or inline-block) which is on the same horizontal plane. This also means that an inline element with top and/or bottom padding that those paddings (vertical ones) will not affect any other horizontal planes above or below the plane or line that the inline element is on. This is similar to how box-shadow does not affect the dimensions of an element nor does it affect the placement of any other element surrounding it.