You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Single purpose classes for setting the display of an element at any breakpoint.
69
+
</p>
70
+
<blockquoteclass="i measure f4 lh-copy mh0">
71
+
The display property defines box’s display type, which consists of the two basic qualities of how an element generates boxes:
72
+
the inner display type, which defines the kind of formatting context it generates, dictating how its descendant boxes are laid out.
73
+
the outer display type, which dictates how the box participates in its parent formatting context.
74
+
<footerclass="f6">
75
+
- <ahref="https://www.w3.org/TR/css-display-3/#the-display-properties" class="link dim black-70 i">CSS3 Display Module Spec</a>
76
+
</footer>
77
+
</blockquote>
67
78
</article>
68
79
<divclass="ph3 ph5-ns pt4 pb5">
69
80
<h2class="f3 bold">Examples</h2>
70
81
<h3class="f5 book pt4 caps">Display Block</h3>
71
82
<p>Block will inherently set width to 100% of its parent element. It will also cause a line break, even if the declared width doesn't take up the full width of the parent.</p>
72
-
<divclass="db bg-black-10 mbs">
83
+
<divclass="db bg-black-10 mb2">
73
84
block
74
85
</div>
75
-
<divclass="db bg-black-10 mbs mw4">
86
+
<divclass="db bg-black-10 mb2 mw4">
76
87
block
77
88
</div>
78
89
@@ -84,33 +95,33 @@ <h3 class="f5 book pt4 caps">Display Inline-Block</h3>
84
95
width: 25% to four elements they will not just render as a 4 column layout by
85
96
default.
86
97
</p>
87
-
<divclass="dib bg-black-10 mbs">
98
+
<divclass="dib bg-black-10 mb2">
88
99
display: inline-block
89
100
</div>
90
-
<divclass="dib bg-black-10 mbs">
101
+
<divclass="dib bg-black-10 mb2">
91
102
display: inline-block
92
103
</div>
93
-
<divclass="dib bg-black-10 mbs">
104
+
<divclass="dib bg-black-10 mb2">
94
105
display: inline-block
95
106
</div>
96
-
<divclass="dib bg-black-10 mbs">
107
+
<divclass="dib bg-black-10 mb2">
97
108
display: inline-block
98
109
</div>
99
110
100
111
<h3class="f5 book pt4 caps">Display Inline</h3>
101
112
<pclass="measure">
102
113
Set content inline. Inline doesn't respect height or width values. It does not render white space between elements.
103
114
</p>
104
-
<divclass="di bg-black-10 mbs">
115
+
<divclass="di bg-black-10 mb2">
105
116
display: inline
106
117
</div>
107
-
<divclass="di bg-black-10 mbs">
118
+
<divclass="di bg-black-10 mb2">
108
119
display: inline
109
120
</div>
110
-
<divclass="di bg-black-10 mbs">
121
+
<divclass="di bg-black-10 mb2">
111
122
display: inline
112
123
</div>
113
-
<divclass="di bg-black-10 mbs">
124
+
<divclass="di bg-black-10 mb2">
114
125
display: inline
115
126
</div>
116
127
@@ -120,7 +131,7 @@ <h3 class="f5 book pt4 caps">Display Table</h3>
120
131
without table markup. This can be useful for vertically aligning content
121
132
or for auto-calculating a variable amount of table cells.
Single purpose classes for setting the display of an element at any breakpoint.
42
+
</p>
43
+
<blockquoteclass="i measure f4 lh-copy mh0">
44
+
The display property defines box’s display type, which consists of the two basic qualities of how an element generates boxes:
45
+
the inner display type, which defines the kind of formatting context it generates, dictating how its descendant boxes are laid out.
46
+
the outer display type, which dictates how the box participates in its parent formatting context.
47
+
<footerclass="f6">
48
+
- <ahref="https://www.w3.org/TR/css-display-3/#the-display-properties" class="link dim black-70 i">CSS3 Display Module Spec</a>
49
+
</footer>
50
+
</blockquote>
40
51
</article>
41
52
<divclass="ph3 ph5-ns pt4 pb5">
42
53
<h2class="f3 bold">Examples</h2>
43
54
<h3class="f5 book pt4 caps">Display Block</h3>
44
55
<p>Block will inherently set width to 100% of its parent element. It will also cause a line break, even if the declared width doesn't take up the full width of the parent.</p>
45
-
<divclass="db bg-black-10 mbs">
56
+
<divclass="db bg-black-10 mb2">
46
57
block
47
58
</div>
48
-
<divclass="db bg-black-10 mbs mw4">
59
+
<divclass="db bg-black-10 mb2 mw4">
49
60
block
50
61
</div>
51
62
@@ -57,33 +68,33 @@ <h3 class="f5 book pt4 caps">Display Inline-Block</h3>
57
68
width: 25% to four elements they will not just render as a 4 column layout by
58
69
default.
59
70
</p>
60
-
<divclass="dib bg-black-10 mbs">
71
+
<divclass="dib bg-black-10 mb2">
61
72
display: inline-block
62
73
</div>
63
-
<divclass="dib bg-black-10 mbs">
74
+
<divclass="dib bg-black-10 mb2">
64
75
display: inline-block
65
76
</div>
66
-
<divclass="dib bg-black-10 mbs">
77
+
<divclass="dib bg-black-10 mb2">
67
78
display: inline-block
68
79
</div>
69
-
<divclass="dib bg-black-10 mbs">
80
+
<divclass="dib bg-black-10 mb2">
70
81
display: inline-block
71
82
</div>
72
83
73
84
<h3class="f5 book pt4 caps">Display Inline</h3>
74
85
<pclass="measure">
75
86
Set content inline. Inline doesn't respect height or width values. It does not render white space between elements.
76
87
</p>
77
-
<divclass="di bg-black-10 mbs">
88
+
<divclass="di bg-black-10 mb2">
78
89
display: inline
79
90
</div>
80
-
<divclass="di bg-black-10 mbs">
91
+
<divclass="di bg-black-10 mb2">
81
92
display: inline
82
93
</div>
83
-
<divclass="di bg-black-10 mbs">
94
+
<divclass="di bg-black-10 mb2">
84
95
display: inline
85
96
</div>
86
-
<divclass="di bg-black-10 mbs">
97
+
<divclass="di bg-black-10 mb2">
87
98
display: inline
88
99
</div>
89
100
@@ -93,7 +104,7 @@ <h3 class="f5 book pt4 caps">Display Table</h3>
93
104
without table markup. This can be useful for vertically aligning content
94
105
or for auto-calculating a variable amount of table cells.
0 commit comments