CSS Units Relative Values Example - CSS - Do It Yourself

Type in your code below

<!DOCTYPE html>
<html>
<head>
<style>
        /* Defining parent styles with absolute values */
        div.parent {
            width: 700px;
            height: 600px;
            font-size: 16px;
        }

/* Defining children styles with relative values */
        div.children {
            /* Absolute values CSS */
            font-size: 200%;
            /* = double of parent's font-size = 32px. */
            margin-top: 2%;
            /* relative to element's height */
            margin-right: 3%;
            /* relative to element's width */
            margin-bottom: 2%;
            /* relative to element's height */
            margin-left: 2%;
            /* relative to element's width */

/* Other styles */
            padding-top: 1%;
            /* relative to element's height */
            padding-bottom: 1%;
            /* relative to element's height */
            padding-left: 2%;
            /* relative to element's width */
            padding-right: 2%;
            /* relative to element's width */
            /* End of absolute values css */

float: left;
            /* This makes block elements float side-by-side, try to remove to see the effect */
            color: red;
            border-style: dashed;
            border-color: red;
            border-width: 2px;

/* End of other styles */
        }

div.first {
            width: 50%;
            /* = half of parent's width = 350px. */
            height: 50%;
            /* = half of parent's height = 300px. */
        }

div.second {
            width: 200%;
            /* = double of parent's width = 1400px. */
            height: 100%;
            /* = exact size of parent's height = 600px. */
        }

div.third {
            width: 25%;
            /* = quarter of parent's width = 175px. */
            height: 10%;
            /* = one-tenth of parent's width = 60px. */
            font-size: 1em;
            /* 100% of parent's font-size' */
        }

div.fourth {
            width: 50vw
                /* = 50% of the page viewport's width. */
            ;
            height: 50vh
                /* 50% of the page viewport's height. */
            ;
            font-size: 1rem;
            /* 100% of root element's font-size' */
        }

div.fifth {
            width: 10em
                /* 10 times the parent's font-size */
            ;
            height: 10em
                /* 10 times the parent's font-size */
            ;
            font-size: 2em
                /* double of parent's font-size */
            ;
        }

div.sixth {
            font-size: 1rem
                /* Results to exact font size of the root element (<html>) */
            ;
        }
    </style>
</head>
<body>
<div class="parent">
        Relative values are relatively sized to the element's parent.
        <div class="children first">
            First element. width:50%; height:50%
        </div>
<div class="children second">
            Second element. width:200%; height:100%
        </div>
<div class="children third">
            Third element, width:25%; height:10%; font-size:1em
        </div>
<div class="children fourth">
            Fourth element, width:50vw; height:50vh; font-size:1rem
        </div>
<div class="children fifth">
            Fifth element, width=10em; height=10em; font-size:2em
        </div>
<div class="children sixth">
            Sixth element, font-size:1rem;
        </div>
<p>
<b>Note:</b>
            If no parent element is available for an element that has relative values, the </p> will serve as
            the parent. In this case setting <code>font-size:200%;</code> would still result to 32px because the default
            <code>font-size</code> of a webpage = <code>16px</code>.
        
    </div>
</body></html>

Related Examples