overflow-clip-margin

Description
Syntax
Examples
Links

Description

The overflow-clip-margin property for CSS specifies the overflow clip edge of the box.

Syntax

CSS

overflow-clip-margin: value;

JS

object.style.overflowClipMargin = "value";

Values

<'overflow-clip-margin'> = <visual-box> || <length [0,∞]>

<visual-box> = content-box | padding-box | border-box

Specifies the box edge to use as the overflow clip edge origin. If omitted, defaults to padding-box on non-replaced elements, or content-box on replaced elements.

content-box

Refers to the content box or content edge.

padding-box

Refers to the padding box or padding edge.

border-box

Refers to the border box or border edge.

<length>

Specifies the length using a number followed by a unit of measurement.

Initial

0px

<!doctype html>
<html>
<head>
    <style>
        blockquote
        {
            border-style: dashed;
            border-width: thin;
            margin-left: 50px;
            margin-top: 50px;
            width: 150px;
        }
        cite
        {
            display: block;
            text-align: right;
        }
        div
        {
            border-color: red;
            border-style: solid;
            border-width: 20px;
            height: 100px;
            overflow: clip;
            padding: 20px;
            width: 100px;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="50px">length</button>
    <button>border-box</button>
    <button>content-box</button>
    <button>padding-box</button>
    <div>
        <blockquote>
            <p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
            <cite>Groucho Marx</cite>
        </blockquote>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("div").style.overflowClipMargin = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>