{"id":359742,"date":"2022-01-03T01:11:00","date_gmt":"2022-01-03T09:11:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=359742"},"modified":"2022-01-03T17:11:34","modified_gmt":"2022-01-04T01:11:34","slug":"overflow-clip-margin","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-clip-margin\/","title":{"rendered":"overflow-clip-margin"},"content":{"rendered":"\n

The CSS overflow-clip-margin<\/code> property determines how far the overflow of an element can go beyond the element’s box before being clipped. This area is called the overflow clip edge<\/strong>.<\/p>\n\n\n\n

.element {\n  height: 100px;\n  overflow: clip; \/* required *\/\n  overflow-clip-margin: 20px;\n}<\/code><\/pre>\n\n\n\n\n\n\n\n
\"The
overflow: clip;<\/code> clips the element’s content while overflow-clip-margin<\/code> sets how far the content is allowed to display beyond the clip.<\/figcaption><\/figure>\n\n\n
Syntax<\/h3>\n\n\n
overflow-clip-margin: <visual-box> || <length [0,\u221e]><\/code><\/pre>\n\n\n\n
  • <visual-box><\/code>:<\/strong> When the specified offset is zero, the visual box specifies the box edge to be used as the overflow clip edge origin. If omitted, the element’s padding-box is used as the default.<\/li>
  • <length <\/a>[0,\u221e]><\/code>:<\/strong> The offset specifies how far the overflow clip edge is extended from the chosen box edge. If omitted, the value is set to zero. Negative values are invalid.<\/li><\/ul>\n\n\n\n
    • Initial: 0px<\/code><\/li>
    • Applies to: all elements<\/li>
    • Inherited: no<\/li>
    • Computed value: the computed<\/li>
    • Animation type: discrete<\/li><\/ul>\n\n\n
      Values<\/h2>\n\n\n
      \/* <length> values *\/\noverflow-clip-margin: 20px;\noverflow-clip-margin: 1rem;\noverflow-clip-margin: 2.4em;\noverflow-clip-margin: 3ch;\n\n\/* <visual-box> value *\/\noverflow-clip-margin: content-box;\noverflow-clip-margin: padding-box;\noverflow-clip-margin: border-box;\n\n\/* Global values *\/\noverflow-clip-margin: inherit;\noverflow-clip-margin: initial;\noverflow-clip-margin: revert;\noverflow-clip-margin: unset;<\/code><\/pre>\n\n\n
      overflow: clip<\/code> is required<\/h3>\n\n\n
      We’ve gotta talk about the overflow: clip<\/a><\/code> property because it’s required for overflow-clip-margin<\/code> to do its thing. In short, overflow-clip<\/code> tells the browser that content that goes beyond the element’s bounds should be hidden\u2014much like declaring <\/p>\n\n\n\n
      . Where the clip<\/code> keyword is different in that it forbids all scrolling, whether by the user or programmatically. It’s also worth noting the box itself is does not become a scroll container, and does not start a new formatting context. In other words, no auto-scrollbars or anything when overflow is clipped.<\/p>\n\n\n\n