CSS - overflow-clip-margin Property
CSS overflow-clip-margin property specifies the distance that content can overflow the element's box before being clipped. This distance is called the overflow clip margin.
Possible Values
-
<length> − Length in pixel or em (relative to the font size of the element). The offset specifies how far the overflow clip edge is extended from the chosen box edge. Default e value is set to zero. Negative values are invalid.
-
<visual-box> − When the specified offset is zero, the visual box specifies the box edge to be used as the overflow clip edge origin. If omitted, the element’s padding-box is used as the default. (Values can be - content-box | padding-box | border-box )
Applies to
All the HTML elements.
Syntax
overflow-clip-margin: length in px | length in em | content-box | padding-box | border-box;
CSS overflow-clip-margin - <length> Value
We can set overflow-clip-margin property to a length value, such as px or em. This length value specifies how far outside the element's box the content can be painted before being clipped.
<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> Value
The following example sets the overflow-clip-margin property of an element to 30 pixels from the content box. The content box is the area inside the element's content, excluding any padding or border −
<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>
To Continue Learning Please Login
Login with Google