The display: inline CSS property is a display option that controls an element’s appearance and layout. Designers use this property so text wraps correctly and elements don’t overlap. Along with options like display: grid and display: inline-block, it’s a key part of strategically designing a website layout where important elements, like informative text or call-to-action buttons, stand out.
With display: inline, internal content like text won’t start on a new line. Instead, it takes up available screen width. With this property, designers can’t set specific pixel-based heights and widths, but they do save time when establishing similar padding for elements in a row.
The inline property automatically adjusts an element’s size depending on how much content — like text — is present. Designers must be careful when combining it with different elements so it doesn’t crowd spaces reserved for other content.
