HTML elements default to inline or block

example inline elements: <a> <span> <strong> <i> <small> <abbr> <img> <q> <code>
example block elements: <p> <div> <ol> <ul><li> <h1> <h6> <blockquote> <pre>

inline elements are laid out horizontally

text text text <a> text text
text text <span> text text

block elements are laid out vertically by default

<div>
<p>
to get a different layout, use display: flex or display: grid

inline elements ignore width & height*

Setting the width is impossible, but in some situations, you can use line-height to change the height

* img is an exception to this: look up “replaced elements” for more

display can force an element to be inline or block

display determines 2 things:

1. whether the element itself is inline, block, inline-block, etc
2. how child elements are laid out (grid, flex, table, default, etc)

display: inline-block;

TRY ME!
inline-block makes a block element be laid out horizontally like an inline element

inline text
more inline text
inline-block
inline text