Display: inline-block

The display: inline-block CSS property defines an element’s appearance and behavior. CSS designers use this code to create website layouts. Like inline properties, inline-block helps designers create boxes that automatically wrap text and other content to give them space and set them apart when beside other content. 

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.