admin/clarkeis.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upload 42 minutes past the nick of time
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 2m34s
Details

Browse Source
This commit is contained in:
Tyler Clarke
2026-03-05 00:42:20 -05:00
parent 5edff913c3
commit 3aef6fa387
11 changed files with 761 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
site/introwebdev/week-8-display.html Normal file
View File

@@ -0,0 +1,169 @@
[!]
[=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]