a way to remove the extra space that is added below inline-block elements? […] none of the proposed solutions (comments, removing spaces between elements in HTML, etc) worked for me.
Those suggestions are for space between elements (left and right). For top and bottom, you also need to look at
line-height. In your fiddle, you are explicitly adding a 4px bottom margin – that’s where the extra space is coming from.
If you don’t want your elements to have a margin, set it to zero:
how to remove the extra space that appears before #footer?