0
CSS · Layout Techniques
New technique
Normal flow
Before you move anything, know how the browser lays things out on its own.
Without any layout CSS, the browser places elements in normal flow: top to bottom, in the order of the HTML. Every element does that in one of two ways.
Block elements start on a new line and stretch across the full width of their parent, so they stack one under the other. Inline elements flow along inside a line of text, like words in a sentence, and are only as wide as their content.
<p>A paragraph is a block, with a <a href="#">link</a> and <strong>bold words</strong> flowing inside it.</p>
- Block by default:
<p>,<h1>,<div>,<section>,<ul>. - Inline by default:
<a>,<strong>,<em>,<span>.