overflow-clip-margin
overflow-clip-margin
は CSS のプロパティで、 overflow: clip
を持つ要素がクリップされる前に、要素の辺からどれだけ外側に描画できるかを指定します。
構文
css
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
を持たない要素では、このプロパティは無視されます。
公式定義
形式文法
overflow-clip-margin =
<visual-box> ||
<length [0,∞]>
<visual-box> =
content-box |
padding-box |
border-box
例
HTML
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
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
関連情報
- 関連する CSS プロパティ:
text-overflow
,white-space
,overflow
,overflow-inline
,overflow-x
,overflow-y
,clip
,display