<h1>Basic document flow</h1>
<p>
I am a basic block level element. My adjacent block level elements sit on new
lines below me.
</p>
<p>
By default we span 100% of the width of our parent element, and we are as tall
as our child content. Our total width and height is our content + padding +
border width/height.
</p>
<p>
We are separated by our margins. Because of margin collapsing, we are
separated by the width of one of our margins, not both.
</p>
<p>
Inline elements <span>like this one</span> and <span>this one</span> sit on
the same line along with adjacent text nodes, if there is space on the same
line. Overflowing inline elements will
<span>wrap onto a new line if possible (like this one containing text)</span>,
or just go on to a new line if not, much like this image will do:
<img src="https://picsum.photos/200/100" alt="snippet of cloth" />
</p>
body {
width: 500px;
margin: 0 auto;
}
p {
background: rgba(255, 84, 104, 0.3);
border: 2px solid rgb(255, 84, 104);
padding: 10px;
margin: 10px;
}
span {
background: white;
border: 1px solid black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.