Display: inline

Display: inline

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.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more