CSS overflow-clip-margin 属性指定内容在被剪裁之前可以溢出元素框的距离。此距离称为溢出剪辑边距。
可能的值
- <length> -长度（以像素或 em 为单位）（相对于元素的字体大小）。偏移量指定溢出剪裁边缘从所选框边缘延伸的距离。默认值 e 值设置为零。负值无效。
- <visual-box> -当指定的偏移量为零时，视觉框指定要用作溢出裁剪边缘原点的框边缘。如果省略，则将元素的填充框用作默认值。（值可以是 - content-box | padding-box | border-box ）
适用于
所有 HTML 元素。
语法
overflow-clip-margin: length in px | length in em | content-box | padding-box | border-box;
CSS overflow-clip-margin - <length> 值
我们可以将 overflow-clip-margin 属性设置为长度值，例如 px 或 em。此长度值指定在剪裁内容之前可以在元素框外绘制多远。
<html>
<head>
<style>
.container {
display: flex;
}
.overflow-px {
background-color: #2fe262;
border: 2px solid #000000;
width: 250px;
height: 150px;
overflow: clip;
overflow-clip-margin: 30px;
margin-right: 100px;
}
h4 {
text-align: center;
color: #D90F0F;
}
.overflow-em {
background-color: #2fe262;
border: 2px solid #000000;
width: 250px;
height: 150px;
overflow: clip;
overflow-clip-margin: 2em;
}
</style>
</head>
<body>
<div class="container">
<div class="overflow-px">
<h4>Tutorialspoint CSS Overflow-clip-margin</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.</p>
</div>
<div class="overflow-em">
<h4>Tutorialspoint CSS Overflow-clip-margin</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.</p>
</div>
</div>
</body>
</html>
CSS overflow-clip-margin - <visual-box> 值
以下示例将元素的 overflow-clip-margin 属性设置为距内容框 30 像素。内容框是元素内容内部的区域，不包括任何填充或边框 -
<html>
<head>
<style>
.overflow {
background-color: #2fe262;
border: 2px solid #000000;
width: 250px;
height: 150px;
overflow: clip;
overflow-clip-margin: content-box 30px;
margin-right: 100px;
}
h4 {
text-align: center;
color: #D90F0F;
}
</style>
</head>
<body>
<div class="overflow">
<h4>Tutorialspoint CSS Overflow-clip-margin</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.</p>
</div>
</body>
</html>
