[!]
[=title "Week 8: Display"]
[=content-]
<p>
Every tag in a page has a <i>display</i>. This controls how it's sized and positioned by the layout engine.
There are three main values for <code>display</code>: <code>inline</code>, <code>block</code>, and <code>inline-block</code>.
Most elements are inline or block by default. For example:
</p>
<pre><code>&lt;style&gt;
#inline-element {
	display: inline; /* this is already set automatically - just putting it here for clarity */
	background-color: yellow;
}

#block-element {
	display: block; /* this is already set automatically - just putting it here for clarity */
	background-color: green;
}

#inline-block-element {
	display: inline-block; /* this is *not* set automatically, divs are block by default */
	background-color: red;
}
&lt;/style&gt;

&lt;span id="inline-element"&gt;
  text&lt;br /&gt;
  text part 2
&lt;/span&gt;

&lt;div id="block-element"&gt;
  text&lt;br /&gt;
  text part 2
&lt;/div&gt;

&lt;div id="inline-block-element"&gt;
  text&lt;br /&gt;
  text part 2
&lt;/div&gt;
</code></pre>
<p>
Gives this result:
</p>
<style>
#inline-element {
	display: inline; /* this is already set automatically - just putting it here for clarity */
	background-color: yellow;
}

#block-element {
	display: block; /* this is already set automatically - just putting it here for clarity */
	background-color: green;
}

#inline-block-element {
	display: inline-block; /* this is *not* set automatically, divs are block by default */
	background-color: red;
}
</style>

<span id="inline-element">
text<br>text part 2
</span>

<div id="block-element">
text<br>text part 2
</div>

<div id="inline-block-element">
text<br>text part 2
</div>

<p>
This is important! Notice that the yellow inline element <i>fits around the text</i> - meaning the size and shape is the same as the contents, even when they're not an even square.
Conversely, the green block element <i>fills the whole width</i> - even though the content is much smaller than that.
And finally, the red inline-block element fills the <i>bounding box</i>:
the smallest rectangle you can draw around the content.
</p>
<p>
Sizes don't always work the same way! For instance, if we change the previous demo code:
</p>

<pre><code>&lt;style&gt;
#inline-element {
	display: inline; /* this is already set automatically - just putting it here for clarity */
	background-color: yellow;
	width: 100px;
	height: 100px;
}

#block-element {
	display: block; /* this is already set automatically - just putting it here for clarity */
	background-color: green;
	width: 100px;
	height: 100px;
}

#inline-block-element {
	display: inline-block; /* this is *not* set automatically, divs are block by default */
	background-color: red;
	width: 100px;
	height: 100px;
}
&lt;/style&gt;

&lt;span id="inline-element"&gt;
  text&lt;br /&gt;
  text part 2
&lt;/span&gt;

&lt;div id="block-element"&gt;
  text&lt;br /&gt;
  text part 2
&lt;/div&gt;

&lt;div id="inline-block-element"&gt;
  text&lt;br /&gt;
  text part 2
&lt;/div&gt;
</code></pre>
<p>
Gives this result:
</p>
<style>
#inline-element-2 {
	display: inline; /* this is already set automatically - just putting it here for clarity */
	background-color: yellow;
	width: 100px;
	height: 100px;
}

#block-element-2 {
	display: block; /* this is already set automatically - just putting it here for clarity */
	background-color: green;
	width: 100px;
	height: 100px;
}

#inline-block-element-2 {
	display: inline-block; /* this is *not* set automatically, divs are block by default */
	background-color: red;
	width: 100px;
	height: 100px;
}
</style>

<span id="inline-element-2">
text<br>text part 2
</span>

<div id="block-element-2">
text<br>text part 2
</div>

<div id="inline-block-element-2">
text<br>text part 2
</div>

<p>
<code>block</code> and <code>inline-block</code> both respect the width, but <code>inline</code> completely ignores it!
</p>
<p>
Displays are extremely important to understand. There are actually quite a few more beyond these basic ones,
but it's critical to understand the basic ones before moving onto weirder things like flexbox and grid.
I highly recommend reading more on display at <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display">Mozilla Developer Network</a> (warning: pretty advanced - we haven't covered all of the material
on that page!).
</p>
[/]
[#template.html]