Skip to content

Commit e7e86d2

Browse files
fantasaifantasai
committed
[css-inline-3] Add a terrible diagram, because I can only make terrible diagrams.
1 parent 00d3962 commit e7e86d2

3 files changed

Lines changed: 78 additions & 0 deletions

File tree

‎css-inline-3/Overview.bs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,12 @@ Inline Layout Model</h2>
124124
are each different things!
125125
See [[CSS-DISPLAY-3]] for an in-depth discussion of box types and related terminology.
126126

127+
<figure>
128+
<img src="images/box-model.png"
129+
alt="diagram showing inline boxes split across line boxes as described above">
130+
<figcaption>Inline Layout Box Model</figcaption>
131+
</figure>
132+
127133
<h3 id="line-boxes">
128134
Layout of Line Boxes</h3>
129135

‎css-inline-3/images/box-model.png‎

24.8 KB
Loading

‎css-inline-3/images/diagrams.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<style>
5+
.block {
6+
background: #88E;
7+
border: solid navy;
8+
float: left;
9+
padding: 4px;
10+
line-height: 1.3;
11+
font-size: 20px;
12+
}
13+
.line {
14+
border: solid orange;
15+
background: #FD8;
16+
overflow: hidden;
17+
}
18+
.line:not(:first-child) {
19+
border-top: none;
20+
}
21+
.root-inline {
22+
border: 1px solid;
23+
background: #DDF8;
24+
border-color: blue;
25+
}
26+
.inline {
27+
border: solid 2px;
28+
background: #FDF8;
29+
border-color: fuchsia;
30+
}
31+
.start, .root-inline:not(.start):not(.end) {
32+
border-right: dotted 1px silver;
33+
}
34+
.end, .root-inline:not(.start):not(.end) {
35+
border-left: dotted 1px silver;
36+
}
37+
.float {
38+
float: left;
39+
height: 2em;
40+
padding: 1em;
41+
background: #8888;
42+
border: solid navy;
43+
}
44+
.big {
45+
font-size: 2em;
46+
}
47+
</style>
48+
49+
<body>
50+
51+
<div class="block">
52+
<div class="line"><span class="root-inline start">
53+
Paragraph text ... <span class="inline start">Line-split Inline</span>
54+
</span></div>
55+
<div class="line"><span class="root-inline">
56+
<span class="inline end">Element</span> ... ... ... ... ... ... ... ... ...
57+
</span></div>
58+
<div class="line"><span class="root-inline">
59+
... ... ... ... <span class="inline big">Big Text</span> ... ... ...
60+
</span></div>
61+
<div class='float'>Float</div>
62+
<div class="line"><span class="root-inline">
63+
... ... ... ... ... ... ... ...
64+
</span></div>
65+
<div class="line"><span class="root-inline">
66+
... ... ... ... ... ... ... ... ...
67+
</span></div>
68+
<div class="line"><span class="root-inline end">
69+
... ... ... ... ...
70+
</span></div>
71+
</span>
72+
</div>

0 commit comments

Comments
 (0)