HTML and CSS Reference
In-Depth Information
3. PADDED IMAGES
The third and final use case comes up when text isn't allowed to wrap
around a sprite image. Typical examples are list items that span multiple
lines, and all kinds of visual notifications that bare icons. Whenever you want
to reserve space on a multi-line element to make sure the text lines up
neatly next to the image, this is the method you'll want to use.
.spritePadded(@x, @y) {
.sprite(@x, @y);
position: absolute;
content: "";
}
.spritePadded(@x, @y, @width, @height) {
.sprite(@x, @y);
position: absolute;
content: "";
width: @width;
height: @height;
}
Again we'll try our luck with pseudo-elements; this time, though, we'll be
performing some positioning tricks. By applying a
position:
absolute
to the pseudo-element, we can place it right inside the space reserved by its
parent element (usually by applying padding to the parent—hence, the name
of the mixin). The actual position of the image (the
left, right, top
and
bottom
properties) is not added to the
spritePadded
mixin and
should be done in the selector itself to keep things as clean and simple as
possible (in this case, by maintaining a low parameter count).
Because we're using absolute positioning, either the
:before
or
:after
pseudo-element will do the job. Keep in mind, though, that the
:after
element is a likely candidate for CSS clearing methods, so if you want to
avoid future conflicts (because the clearing fix won't work if you add a
