HTML and CSS Reference
In-Depth Information
You need to finish the job. Add <span> elements to the rest
of the music recommendations and test your page. You'll
find the solution in the back of the chapter.
<ul>
<li><span class="cd">
Buddha Bar
</span>
,
<span class="artist">
Claude Challe
</span></li>
<li>
When It Falls, Zero 7
</li>
<li>
Earth 7, L.T.J. Bukem
</li>
<li>
Le Roi Est Mort, Vive Le Roi!, Enigma
</li>
<li>
Music for Airports, Brian Eno
</li>
</ul>
Q:
When do I use a <span> rather
than another inline element like <em> or
<strong>?
A:
As always, you want to mark up your
content with the element that most closely
matches the meaning of your content. So,
if you are emphasizing words, use <em>;
if you're trying to make a big point, use
<strong>. But if what you really want is to
change the style of certain words—say,
the names of albums or music artists on a
fan site web page—then you should use a
<span> and put your <span> elements into
appropriate classes to group them and style
them.
Q:
Can I set properties like width on
<span> elements? Actually, what about
inline elements in general?
A:
You can set the width of inline
elements like <span>, <em>, and <strong>,
but you won't notice any effect until you
position them (which you'll learn how to do in
the next chapter). You can also add margin
and padding to these elements, as well as
a border. Margins and padding on inline
elements work a little differently from block
elements
—
if you add a margin on all sides
of an inline element, you'll only see space
added to the left and right. You can add
padding to the top and bottom of an inline
element, but the padding doesn't affect the
spacing of the other inline elements around
it, so the padding will overlap other inline
elements.
Images are a little different from other inline
elements. The width, padding, and margin
properties all behave more like they do for
a block element. Remember from Chapter
5: if you set the width of an image using
either the width attribute in the <img>
element or the width property in CSS, the
browser scales the image to fit the width
you specify. This can sometimes be handy if
you can't edit the image yourself to change
the dimensions, and you want the image to
appear bigger or smaller on the page. But
remember, if you rely on the browser to scale
your image, you may be downloading more
data than you need (if the image is larger
than you need).
