overflow-clip-margin
overflow-clip-marginは、overflow: clipが適用された要素において、クリッピング領域の外側にコンテンツがどの程度表示されるかを制御します。デフォルトではパディングボックスの端でクリップされますが、このプロパティにより余白を持たせることが可能です。装飾的なはみ出し表現を維持しつつ、不要なスクロールバーを防ぐ場面で有用です。
概要
overflow-clip-marginは、overflow: clipが適用された要素において、クリッピング領域の外側にコンテンツがどの程度表示されるかを制御します。デフォルトではパディングボックスの端でクリップされますが、このプロパティにより余白を持たせることが可能です。装飾的なはみ出し表現を維持しつつ、不要なスクロールバーを防ぐ場面で有用です。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 未対応
基本構文
CSS
.box {
overflow: clip;
overflow-clip-margin: 20px;
}実務での使いどころ
-
装飾のはみ出し許容
ボックスシャドウやドロップシャドウなど、要素の境界をわずかに超える装飾効果をクリップせずに表示できます。
注意点
- overflow: clip以外のoverflow値と組み合わせても効果がないため、必ずoverflow: clipと併用してください。
アクセシビリティ
- クリップされたコンテンツがスクリーンリーダーで読み上げられる場合があるため、重要な情報がクリップ領域外に隠れないよう注意してください。