-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdisplay-outside.html
85 lines (80 loc) · 3.57 KB
/
display-outside.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body>
<header>
<h1 class="code tag">display-outside</h1>
</header>
<main>
<article>
The <span class="code tag">display-outside</span> value dictates how an element behaves in its parent's layout.
</article>
<article>
<h2 class="code">display: inline</h2>
<label for="display-inline-section-toggle" class="section-toggle-label">Toggle section</label>
<input id="display-inline-section-toggle" class="section-toggle" type="checkbox" checked>
<div class="toggleable-section">
<section>
<p>
The <span class="code tag">inline</span> value makes the box behave like a word in the sentence.
This means the block flows in the direction the language does and wraps to the next row if the
space
requires it to.
Margins and paddings only work on the text flow's direction.
</p>
</section>
<section class="example-section">
<h5>Example<span class="tooltip" title="You can resize the box below">(?)</span>:</h5>
<div class="resizable example">
<p>
Here is an example
<span class="example-element" style="display: inline;">inline element</span>
in a normal paragraph
</p>
</div>
<textarea readonly class="example-code"></textarea>
</section>
</div>
</article>
<article>
<h2 class="code">display: block</h2>
<label for="display-block-section-toggle" class="section-toggle-label">Toggle section</label>
<input id="display-block-section-toggle" class="section-toggle" type="checkbox" checked>
<div class="toggleable-section">
<section>
<p>
The <span class="code tag">block</span> value makes the box behave like a paragraph
This means the block flows perpendicular to the flow of the text filling in an entire line.
Margins and paddings only work on both direction.
</p>
</section>
<section class="example-section">
<h5>Example<span class="tooltip" title="You can resize the box below">(?)</span>:</h5>
<div class="resizable example">
<p>
Here is an example
<span class="example-element" style="display: block;">block element</span>
in a normal paragraph
</p>
</div>
<textarea readonly class="example-code">
</textarea>
</section>
</div>
</article>
</main>
<nav>
<a class="code tag" href="display-outside.html">display-outside</a>
<a class="code tag" href="display-inside.html">display-inside</a>
<a class="code tag" href="display-listitem.html">display-listitem</a>
<a class="code tag" href="display-box.html">display-box</a>
<a class="code tag" href="display-legacy.html">display-legacy</a>
</nav>
<aside>
</aside>
<footer>
</footer>
</body>
</html>