A local viewport

clip

Limit the viewable portion of an element by drawing a rectangle around an inside portion of it and discarding the rest.

Property values

This property expects one value, a rectangle that specifies the top, right, bottom, and left edges of the area to keep. Use the function rect(top right bottom left) to specify this area.

This property in only meaningful on elements that also have the property position:absolute or position:fixed.

Units

Use any of these font-relative typographic units to for the top, right, bottom, and left edges:

em em The font-size of the current font
rem relative em The font-size of the <html> element
lh line height The line-height of the current font
rlh relative line height The line-height of the <html> element
cap cap height The nominal height of the current font's capital letters
ex "x" The height of the current font's "x" glyph
ch "0" The advance measure (the width) of the current font's "0" glyph
ic ideograph count The advance measure (the width) of the current font's "水" ideograph

Or use any of these fixed size units which are independent of the current font:

% percent A percentage of the parent element's height/width
in inch A size equal 96px
px pixels A size equal to 1/96 inch
pt point A size equal 1in/72 = 1.33px
pc pica A size equal 1in/6 = 12pt = 16px
cm centimeter A size equal to 96px/2.54 = 37.8px
mm millimeter A size equal to 96px/25.4 = 3.8px
Q quarter millimeter A size equal to 96px/1016 = 0.94px

Examples

/* display only the innermost 100 x 100 pixel area of the element,
and discard the remaining 10px area on each side */
clip: rect(10px 110px 110px 10px);
position: absolute;
width: 120px;
height: 120px;
clip
0

style > position > clipA local viewport

🔗 🔎