Block Elements
Block elements always start on a new line and take up the full width available.
<div>I am a block — I take the full width.</div>
<p>Another block below me.</p>Common block elements:
<div> <p> <h1>–<h6> <ul> <ol> <li>
<table> <form> <header> <footer> <section> <article> <nav> <main> <aside>Inline Elements
Inline elements flow within text. They only take as much width as their content and do not force a new line.
<p>
This is <strong>bold</strong> and this is <em>italic</em> inside one paragraph.
<a href="#">Links are inline too</a>.
</p>Common inline elements:
<span> <a> <img> <strong> <em> <b> <i> <mark> <small> <code> <input> <label> <button>Changing Display with CSS
/* Make a block element inline */
li { display: inline; }
/* Make an inline element block */
a { display: block; }
/* The best of both: inline but accepts width/height */
img { display: inline-block; }You cannot nest a block element inside an inline element. For example, putting a
<div> inside <span> is invalid HTML.