What does it mean to display inline vs inline blocks?

On HTML every element has two display values depending on the type of element, this are "inline" and "block".
Inline elements are the ones that stay in the same line and some properties are not respected, like "margin top" or "margin bottom", these elements can be one next to the other, here are the inline elements on html:

<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> <ttM> <var>

On the other hand, Block elements are the ones that are displayed one on top of the other, each of these elements, by default, start on a new line each one. This are the block elements on html:

<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>

Sometimes, when working on a design, we want to change the way that any of these elements are displayed on a website, and we might want to have an inline element to be displayed as a 'block' or we might want to have block elements to be displayed one next to the other, and in these situations on CSS we use the property "display" to be able to work around these 'default' attributes of these elements, so with 'display: inline-block', an element that by default is 'inline', we can now set a width and height on this element and make it to be displayed as a 'block' element.

In the above example, the default 'display' of the elements is 'inline', where the width and height are not respected, but the padding to the sides does.

In the above example, the display was set to "inline-block" and we can see that now the same 3 boxes of text have now a width and a height, which is respected now.

Same for the opposite situation, we can have a 'block element' and the way that we want our design, we want it to be displayed one next to the other, a classic example would be some paragraphs, we might want them to be as X amount of colums in our website, so the way that we would do it would be to change the display attribute in CSS: 'display: inline' in order to achieve this.

In this case, we can see that the default display property for the paragraph tag is block, they are stack on each other.

Above we can see that the css display property for the text element was set as "inline-block" and now mantaining their block properties, they are now displayed one next to each other.