CSS Inline-Block

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:

Find Your Bootcamp Match

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

Select your interest
Software Engineering Design Data Science Data Analytics Cyber Security First name

Last name

Email

Phone number

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

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.

"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

Find Your Bootcamp Match

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.