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: 

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.

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.