This diagram illustrates two block boxes, one above the other, with rectangular clipping regions of different dimensions.
The block boxes (generated for a P element) are identical and depicted with a thick black border and a gray background. A coordinate system has its origin at the upper left corner of each block box. The x-axis increases along the top edge of the P box, the y-axis down the left edge. Both axes depict increments of 5px.
The clipping region of the first P box lies entirely within it, offset 5px from the top and left edges of the P box, and 10px from the right and bottom edges. The clipping region has a thick dashed border and a white background and is labeled "clip region".
The clipping region of the second P box resembles that of the first in style and position, except that the right edge is 5px to the right of the P box's right edge. Thus, the clipping region lies partially outside the P box.
Both block boxes have four red arrows representing the four offsets in the corresponding style rule: one short, vertical arrow labeled "top" goes from the top edge of the block box to the top of the clipping region; one longer vertical arrow labeled "bottom" goes from the top op the block box to the bottom of the clipping region; one short, horizontal arrow labeled "left" goes from the left edge of the block to the left edge of the clipping region; and one longer horizontal arrow labeled "right" goes from the left edge of the block to the right edge of the clipping region.