overflow-clip-margin

overflow-clip-margin は CSS のプロパティで、 overflow: clip を持つ要素がクリップされる前に、要素の辺からどれだけ外側に描画できるかを指定します。

構文

overflow-clip-margin: 20px;
overflow-clip-margin: 1em;

/* グローバル値 */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: unset;

overflow-clip-margin プロパティは長さで指定します。負の値は許可されていません。

メモ: overflow: clip を持たない要素では、このプロパティは無視されます。

公式定義

初期値0px
適用対象すべての要素
継承なし
計算値the computed
アニメーションの種類離散値

形式文法

overflow-clip-margin = 
  <visual-box>    ||
  <length [0,∞]>  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

例

HTML

<div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

CSS

.box {
  border: 3px solid black;
  width:  250px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 20px;
}

例

仕様書

Specification
CSS Overflow Module Level 3
# overflow-clip-margin

ブラウザーの互換性

BCD tables only load in the browser

関連情報