Block, inline, and inline-block

Every element on a page produces a rectangular box, and the browser must decide where each box goes. Some boxes start on a new line and stretch across their container. Others sit inside a line of text, next to the words around them. The CSS property that makes this choice is display, and its three most common values are block, inline, and inline-block.

display: block;
display: inline;
display: inline-block;

Every HTML element already has a default display value. A <div>, <p>, <h2>, and <ul> are block elements by default. An `<li>