Height & Width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Height & Width</title>
<style>
.demoWidthHeight {
background-color: coral;
width: 33%;
height: 150px;
max-width: fit-content;
}
.demoMaxWidth {
background-color: teal;
width: 75%;
max-width: fit-content;
}
</style>
</head>
<body>
<!--
height & width properties - are used to set the height and width of an element
These properties may have following values:
auto - This is default. Browser calculates the height and width
length - Defines height/width in px, cm, etc.
% - Defines height/width in percent of containing block
initial - Sets height/width to its default value
inherit - height/width will be inherited from its parent value
max-width : property is used to set the maximum width of an element
min-width : property sets the minimum width of an element
max-height : property is used to set the maximum height of an element
min-height : property sets the minimum height of an element
-->
<h1>Demo: Height & Width</h1>
<h2>Demo width & height </h2>
<p class="demoWidthHeight">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi dolorem animi quas deserunt vero molestias modi sit voluptate harum aperiam.</p>
<hr>
<h2>Demo max-width </h2>
<p class="demoMaxWidth">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
</body>
</html>