Earlier this week, I was working on the pairing challenge of creating a blog template. During this challenge my partner asked me what the difference between inline, block and inline-block. Off the top of my head I couldn’t describe what the difference was in words. I knew what they did, I had used them in my solo challenge, but I couldn’t express what they did properly. So that is why I am writing this blog.
First lets understand the difference between inline and block. Displaying elements inline means that they arranged in the same line. Not only that but inline elements cannot have a height, width or a vertical margin. Now lets talk about block. Displaying elements with block means you are blocking them off from other elements, it is putting a break in to separate it from other elements. Unlike inline, elements with block can have a height, width, and a vertical margin.
Inline-block takes the best of both worlds. It allows you to display elements on the same line while still allowing them to have a height, width, and a vertical margin. An example of how you can use this would be to place buttons all on the same line, while giving them a height and width of 100 pixels. I hope that this gives you a better understanding of how inline, block, and inline-block work.