CSS Units Absolute Values Example - CSS - Do It Yourself

Type in your code below

<!DOCTYPE html>
<html>
<head>
<style>
        div {
            /* Absolute values CSS */
            font-size: 21px;
            margin-top: 20px;
            margin-right: 30px;
            margin-bottom: 20px;
            margin-left: 50px;

padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 20px;
            padding-right: 20px;
            /* End of absolute values css */
            color: red;

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

/* End of other styles */
        }

div.first {
            width: 300px;
            height: 200px;
        }

div.second {
            width: 10cm;
            height: 5cm;
        }

div.third {
            width: 4.6in;
            height: 2in;
        }
    </style>
</head>
<body><p>
    Absolute values length are same everywhere and on every media. Which means the length of the element will be the
    same on both desktop and mobile screens.</p>
<div class="first">First element. width=300px; height=200px </div>
<div class="second">Second element. width=10cm; height=5cm </div>
<div class="third">Third element, width=4.6in; height=2in </div>
</body>
</html>