Display: inline-block

display: inline-block is a CSS property that combines the best of two worlds: like an inline element, it flows alongside other content, but like a block element, it accepts width, height, and margin. That combination makes it a common choice for buttons and nav items that need to sit in a row but still hold their own dimensions.

At a glance, inline and inline-block are similar, but using display: inline creates an element that automatically adjusts height and width depending on the content inside without developer input — they can’t set height and width parameters. The element adjusts itself and forces content to follow its spacing rules, sometimes with awkward results. With the display: inline-block property, designers can adjust the height and width of individual children within the element, which is important when side-by-side content has different dimensions, such as a short line of text next to a much larger image. 

Practice choosing the right display property in CSS layout & positioning.