microsoft.com Home   All Products  |   Support  |   Search  |   microsoft.com Home  
Microsoft

Microsoft Typography | Web... | Specifying... | 5.5 Box properties | Negative margins next


Negative margins


Using negative margins to layer text

The authors of the Cascading Style Sheet specification predicted that margins, especially negative margins, would be used to achieve interesting typographic effects. However, the use of margins in this way can be problematic. To see some of the problems, simply view the demonstration pages in our CSS gallery with style sheets disabled.

The most interesting use of negative margins is in creating layered typographic effects and shadows.


Shadows

To create the shadow effect shown in figure 1 the shadow layer is specified in the normal way. The second layer is drawn on top of the first by using a 'margin-top' property with a negative value. To move this layer a few pixels to the right 'margin-left' is applied. The code used to create the effect is shown below. 

<DIV STYLE="font-family: Arial Black; 
font-size: 24px; color: black">
SpaceGun
</DIV>
<DIV STYLE="margin-top: -34px; margin-left: 3px; 
font-family: Arial Black; font-size: 24px; 
color: white">
SpaceGun
</DIV>

negative margin demo negative margin demo
Figure 1. How the code is interpreted by Microsoft Internet Explorer 3.
Figure 2. How this is displayed in non CSS browsers.

Figure 2 shows how this effect is presented in non CSS browsers. The W3C Style sheet solution to this problem is to propose a specific shadow property. This extendibility of the standard is one of its most important features. Unlike normal HTML, when designers demand a particular style sheet feature, there is no reason why it can't be discussed and added to the specification.

Until the shadow property is finalized a possible work around is to use FONT attributes to make one of the text layers as small as possible and the same color as the background, an effectively invisible layer. The following code demonstrates the technique. 

<FONT COLOR=#BBBBDD SIZE=1>
<DIV STYLE="font-family: Arial Black; 
font-size: 24px; color: black">
SpaceGun
</DIV> 
</FONT>
<FONT FACE="Arial Black" COLOR=#000000 SIZE=5>
<DIV STYLE="margin-top: -34px; margin-left: 
3px; font-family: Arial Black; font-size: 24px; 
color: white"> 
SpaceGun
</DIV>
</FONT>

negative margin demo negative margin demo
Figure 3. The FONT attributes are ignored by Internet Explorer 3.
Figure 4. In non CSS browsers the FONT attributes are used.

As can be seen from theses screen captures, a CSS enabled browser will ignore any HTML FONT attributes such as FACE, COLOR or SIZE and use the STYLE attributes. However, in non CSS browsers, the converse is true. Here STYLE is ignored and the FONT attributes are used.


Working out values for negative top margins

Working out the values required to achieve the desired layering effects can be difficult. You would have thought that to place a layer of text directly over the top of some other 20pt text you would specify a margin-top value of -20pt. Unfortunately this is not the case. The following code gives the results shown in figure 5. 

<DIV STYLE="font-family: Arial Black; 
color: red; font-size: 20pt;">
Layer One
</DIV>
<DIV STYLE="font-family: Arial Black; 
color: black; font-size: 20pt; 
margin-top: -20pt">
Layer 2
</DIV>

The reason for this problem is that Microsoft® Internet Explorer automatically inserts space between lines of text. This needs to be taken into account when working the negative value required to produce the overlay. To make things more complicated the amount of space added between lines depends on the typeface specified.

negative margin demo negative margin demo negative margin demo
Figure 5. Giving a top margin a value equal to the type size of the preceding layer.
Figures 6 & 7. The distance of vertical shift will vary depending on font used. All three examples specify 20pt text with a negative top margin of -20pt.


Through trial and error, values can be worked out for any given font at any given size. However, to make negative margins easier to work with the amount of space inserted between lines can be set using the 'line-height' property. The effect of the following code can be seen in figure 8. 

<DIV STYLE="font-family: Arial Black; 
color: red; font-size: 20pt; line-height: 
20pt">
Layer One
</DIV>
<DIV STYLE="font-family: Arial Black; 
color: black; font-size: 20pt; 
margin-top: -20pt; line-height: 20pt">
Layer 2
</DIV>

negative margin demo negative margin demo negative margin demo
Figure 8. An exact overlay is achieved by setting the line-height equal to the negative top margin.
Figures 9 & 10. Using line-height and margin-top in this way should work for any typeface.

A word of warning is necessary. Using line-height with Internet Explorer 3 can result in unpredictable effects. For best results line-height needs to be specified for all the tags and classes used within the document.


The samples shown on this page are bitmap screen captures. The CSS and HTML code used to produce them has been commented out. Use View Source to access it.

this page was last updated 30 June 1997
© 1997 Microsoft Corporation. All rights reserved. Terms of use.
comments to the MST group: how to contact us

 

Microsoft Typography | Web... | Specifying... | 5.5 Box properties | Negative margins next