8em
for the content of the span element within the dropCap span. This is the height of
three lines of text, from the top of a character in the first line to the bottom of a
character in the third.
.dropCap span {
font-size: 4.8em;
line-height: 1em;
}
3. Float the drop cap. In order for subsequent text to flow around the drop cap, it has
to be floated. This is done via the float: left property/value pair. The display:
block pair sets the dropCap span as a block-level element, enabling you to set edge
dimensions for it. By defining a height value that??™s slightly smaller than the
font-size setting, subsequent text won??™t sit underneath the drop cap once it??™s correctly
positioned.
.dropCap {
float: left;
height: 4.7em;
}
Creating a drop cap with span elements and CSS
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
100
4. Tweak positioning of the drop cap. Use top and left margins (positive and negative)
to move the drop cap into position, so that it correctly lines up with the other text
on the page. The margin-right setting ensures that text to the right of the drop
cap doesn??™t hug it.
.dropCap {
float: left;
height: 4.7em;
margin-top: -0.2em;
margin-left: -0.4em;
margin-right: 0.5em;
}
The following image shows what your page should look like so far.
5. Review the code and add a colored background. This method also isn??™t without its
problems??”the span elements have no semantic value and are therefore ???bloated
code???; and the values set in steps 2 and 3 require some experimentation for each
different font and paragraph setting you use them with.
Pages:
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177