Skip to main content
X

Explore your training options in 10 minutes

CSS Tutorials

CSS Inline-Block

Christina Kopecky - December 29, 2020


The display property is integral to the layout of a webpage. The display property determines how an element is displayed in relation to the elements around it. There are several values for this CSS property; the most used values include inline , block , and inline-block . In this article we will discuss the implementation and difference between these three CSS display values.

Syntax

The syntax for implementing any CSS value of display, the syntax is as follows:

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

display: value;

In this article, the three values are inline, block, and inline-block, so the syntax would be:

display: inline;

display: block;

display: inline-block;

The Difference Between Inline, Block, and Inline-Block Displays

The display property determines how an element is displayed in relation to the elements around it.

Let’s start off by reviewing inline elements and block elements, before seeing how inline-block elements compare.

Inline

Inline-level elements are displayed inline, meaning there is no line break or separation between this element and the parent or previous element. It takes up only the width necessary; if you attempt to add custom width and height properties to the element, the properties will be ignored.

HTML elements that are displayed inline by default include the following: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button> <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>

Block

Block-level elements are displayed on a new line, and take up all width possible, unless a width property is written. Unlike inline elements, if you add custom width and height properties, those properties will be respected.

HTML elements that are displayed block by default include the following: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>...<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>

Inline-Block

With that in mind, inline-block elements combine the best of both inline and block elements: inline-blocks are displayed inline with the ability to add custom width and height properties. This makes them ideal when you want to style the display of a site, and would like elements to sit side by side.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Conclusion

In this article, we discussed how to implement three values for the CSS display property: inline, block, and inline-block, and the pros and cons of using inline-level and block-level displays. If you found this article helpful, check out other articles: Learn CSS: A Guide to Learning Cascading Style Sheets , or our Beginner’s Guide to Learning CSS .

If you want to learn more about front-end web development, talk to one of our coaches today to find the best training program.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content