When styling using CSS, it is important to know what syntaxes mean to help you better organize and style your webpage. CSS has such a vast variety of syntax that it is hard to know when to use the correct one or which syntax is the best to use for what you are trying to achieve. The syntax display is often used to line up objects or display text, object, images, etc a certain way. When using display you have the options to display many different property values. With that said, today we will be going over the difference between displaying inline and displaying inline-block.

What does it mean to display inline? When you select to display inline you are respecting left and right margins and padding, but not the top and bottom. You also cannot have a width and height set. Displaying inline allows other elements to sit to their left and right; the content of that element will become part of the paragraph. Basically if displaying text inline the paragraph can continue right and left of the inline display like normal. Inline elements will push other elements horizontally away but not vertically.

Unlike inline, inline-block allow elements to sit to their left and right. It also respects the top and bottom margins and padding as well as height and width. Inline-block is similar to inline, it will set inline with the natural flow of text. The difference is that you are able to set width and height manually which gives you more creative options when styling your website. Below is an image that shows the difference between inline and inline-block. Knowing the difference between these two display options will help you select the best way to style your page!