CSS - overflow-clip-margin

概要

属性名	overflow-clip-margin
値	[ content-box \| padding-box \| border-box ] \|\| <length>
初期値	0px
適用可能要素	overflow が適用された要素
継承	継承しない
サポート	https://caniuse.com/mdn-css_properties_overflow-clip-margin

説明

overflow: clip が適用された要素に対して、どこまで内部コンテンツがはみだしてよいかを指定します。

content-box: コンテンツボックス領域を起点とします。
padding-box: パディングボックス領域を起点とします。デフォルトの起点です。
border-box: ボーダーボックス領域を起点とします。
<length>: 起点を 0px としてはみ出してよい長さを指定します。マイナス値を指定することはできません。

使用例

CSS

.my-example {
  width: 250px;
  height: 100px;
  padding: 15px;
  margin-bottom: 20px;
  border: 20px solid #ddd;
  overflow: clip;
  .title {
    font-weight: bold;
    font-size: 130%;
  }
}
.ocm-content-box   { overflow-clip-margin: content-box; }
.ocm-padding-box   { overflow-clip-margin: padding-box; }
.ocm-border-box    { overflow-clip-margin: border-box; }
.ocm-border-length { overflow-clip-margin: border-box 1rem; margin-bottom: 2rem; }

HTML

<div class="my-example">
  <div class="title">(default)</div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...
</div>

<div class="my-example ocm-content-box">
  <div class="title">content-box</div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...
</div>

<div class="my-example ocm-padding-box">
  <div class="title">padding-box</div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...
</div>

<div class="my-example ocm-border-box">
  <div class="title">border-box</div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...
</div>

<div class="my-example ocm-border-length">
  <div class="title">border-box 1rem</div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...
</div>

表示

(default)

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content-box

padding-box

border-box

border-box 1rem

リンク

初版：2025年3月9日、最終更新：2025年3月9日

https://www.tohoho-web.com/css/prop/overflow-clip-margin.htm