Frames

Frame Margins

Simple Examples | No Frames | Borders and Borderless Frames | Nested Framesets | Frame Margins | Naming Frames & Targeting Links | Frames Exercise

To this point we've mostly loaded very simple HTML pages into the frames of our various example frame sets: almost every file had only a solid color background and a short piece of text ("File 1", "File 2", etc.). Now let's look at an example where one of the frames contains nothing but a single image: Example 11.

Example 11 opens the frame set in a new browser window that is again 400 by 400 pixels. To illustrate our following points, we've specified the window to not be resizable. The top frame occupies 20% of the available height, and so it is 80 pixels tall. The bottom frame occupies 80% of the available height; it's 320 pixels tall. (We've used borderless frames here, specifying border=0 above, to ensure that no space in the frame set gets eaten up by the border between the frames. This was to guarantee that we know for sure how tall the bottom frame is in this case.)

The image loaded into the bottom frame is 263 pixels wide by 300 pixels tall. So the image should fit into the bottom frame, right? Well, maybe it does and maybe it doesn't. That will depend on which browser you're using. In Netscape the image does fit into the lower window, but in Internet Explorer it doesn't: there is a vertical scroll bar in the bottom frame. (The bottom of the image may be just slightly above or slightly below the browser's edge - depending on the version of IE.)

The images below are reduced to 50% of the actual size displayed in the frame set.

Netscape Internet Explorer

In both cases we notice something curious: the image doesn't fit snugly against the top or left of the bottom frame. There are instead margins between these edges of the image and the bottom frame. (The image is just the rectangular picture of the clocktower. The white background around the picture is not part of the image; it's just the default browser background.) If you look closely, you'll also see that there are different top and left margins in Netscape and IE. In fact, it's because IE has added more vertical padding for the image than Netscape that we get the scroll bar in the bottom frame when we view the frame set with Explorer.

What's causing this extra padding? Why does the amount of padding depend on the browser? Is there any way we can control the amount of the padding, and maybe even get rid of it altogether?

The amounts of padding are different in the two browsers simply because the default margins for frames are different for the browsers. But we can override the default values by specifying the marginheight and marginwidth attributes of the frame tags. Here's what happens if we set marginheight to zero: Example 11a. The HTML that creates the frame set is:

Note that although we only specified marginheight="0", we got rid of the padding at the left as well as the padding above the image. The same thing happens if we specify only marginwidth="0": Example 11b; or if you set both margins to zero: Example 11c. (If you look very closely, you can see a subtle difference in these three cases -11a, 11b, 11c - with Netscape. What is it? You don't see this effect with Explorer.)

We can also set either marginheight or marginwidth (or both) to any other desired positive numerical value, if this should be desired in a particular case. For example, perhaps we wanted a large offset for some reason:Example 11d or Example 11e.

An Experiment: If you're using Explorer, you should see a scroll bar in the bottom frame even if the image is completely above the bottom edge of the browser window (i.e., above the bottom of the bottom frame). Why would that happen? We can understand why if we view the frame set again with the default margins, but this time open the set in a resizable window: Example 11f.

As noted before, if you're using Explorer the lower frame has a scroll bar, but if you're using Netscape it doesn't. If your browser is Netscape, drag the lower edge of the example's window upward about a half inch so that you can perform the rest of this exercise. When you release the mouse button you should now get a scroll bar in the bottom frame. (You won't see the scroll bar while you're dragging the window bottom vertically; you have to release the button or drag the cursor horizontally along the bottom window edge before the scroll bar will appear in Netscape.)

Regardless of your browser, you should now have a scroll bar in the bottom frame of Example 11. Place your cursor on the bottom edge of the example's window, hold down the mouse button, and drag the bottom edge of the window downward carefully. Drag just until the scroll bar disappears. (With Netscape you'll need to drag a little and then release the mouse button to see if the scroll bar has disappeared. If it hasn't, drag a little more and release again, etc. until the scroll bar does disappear. With Explorer you should see the scroll bar resize and finally disappear as you drag.) When does the scroll bar disappear? Is it when the bottom edge of the lower frame (the window bottom) is just at the bottom of the image? Or do you have to drag the bottom of the frame lower than that?

In fact, the scroll bar does not disappear as soon as the bottom of the frame is even with the bottom of the image. You have to continue dragging the bottom frame downward. If you look closely, you'll see that the scroll bar finally disappears when the frame is at a distance below the image that is equal to the marginheight padding that has been inserted above the frame.

Now try dragging the right edge of the Example 11 window to the left until you get a horizontal scroll bar along the bottom edge of the frame. Then drag the right edge to the right until that scroll bar just disappears. How does the result of this experiment compare with the one you just performed on the bottom edge of the frame?

As you've discovered, the value of marginheight and marginwidth aren't just padding between an image and the top and left edges of a frame. These quantities also specify the bottom and right margins of a frame's contents. (You probably already guessed that was the case?)

At the risk of belaboring the obvious, note that marginheight and marginwidth specify a frame's margins regardless of the frame's content. These margins don't just come into play when a frame contains a single image like we used in our previous examples. We illustrated these margin specifications by using a frame holding a single image for a couple of reasons. 1) The image was a fixed size and wouldn't "reformat" when the browser window (and frame set) was resized; thus we could avoid complicating the example with HTML text that would reflow to fit a window as it changed size. Consequently, we always knew the height of the frame contents, and could determine whether it seemed reasonable or not that the contents should fit in the frame without a scroll bar. 2) It's unlikely that you'd ever choose zero sized margins for a frame that contained text if such margins would cause the text to be jammed right up to a frame's edge.